欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML 练习绑定onclick事件

程序员文章站 2024-01-26 22:28: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>

上一篇： Java 注解

下一篇：

推荐阅读