使用原生js 实现点击消失效果

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_30471065

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量908

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rongyao/p/11111428.html

版权

JQ版

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>

<body>
    <p>如果你点我，我就会消失。</p>
    <p>继续点我!</p>
    <p>接着点我!</p>
</body>

</html>

JS版

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>

</head>

<body>
    <p>如果你点我，我就会消失。</p>
    <p>继续点我!</p>
    <p>接着点我!</p>

    <script>
        // 使用原生js 实现点击消失效果
        window.onload = function () {

            var ppp = document.getElementsByTagName("p");
            console.log(ppp)
            if (ppp.length > 0) {
                for (var i = 0; i < ppp.length; i++) {
                    console.log(ppp[i])
                    ppp[i].addEventListener("click", function () {
                        this.hidden = true;
                    });
                }
            }

        }
    </script>
</body>

</html>