HTML 练习绑定onclick事件
程序员文章站
2022-05-04 14:14:04
方法一 方法二 方法三 方法四 方法五 ......
方法一
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<p onclick="func1(this)">hello p</p>
<script>
function func1(self){
alert(self.innerhtml);
}
</script>
</body>
</html>
方法二
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<p id="p1">hello p</p>
</body>
<script>
var ele = document.getelementbyid("p1")
ele.onclick=function (){
alert(this.innerhtml)
}
</script>
</html>
方法三
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<p class="p">hello p1</p>
<p class="p">hello p2</p>
</body>
<script>
var ele = document.getelementsbyclassname("p")[0];
ele.onclick=function(){
alert(this.innerhtml)
}
</script>
</html>
方法四
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
function f(){
$("p").css("color","red")
}
</script>
</head>
<body>
<p onclick="f()">hello world</p>
</body>
</html>
方法五
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>hello world</p>
</body>
<script>
$("p").click(function(){
$(this).css("color","red")
})
</script>
</html> 上一篇： 用 Python分析朋友圈好友的签名
下一篇： Django 提交 form 表单