根据属性获取div

最新推荐文章于 2024-02-07 15:00:58 发布

卷头发的秃头酱

最新推荐文章于 2024-02-07 15:00:58 发布

阅读量886

点赞数

文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/qq_48254349/article/details/121857392

版权

获取属性需要注意的问题
1.要根据class属性拿出这个div时，document.getElementsByClassName(‘prop’)[0];
一它是className 二后面需要跟上[0]；因为class属性可能不止这一个

不然就会出现 Cannot read property ‘addEventListener’ of undefined at的错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .content
    {
        width: 500px;
        height: 500px;
        background-color: sandybrown;
    }
    .box
    {
        width: 100px;
        height: 100px;
        background-color:springgreen;
    }
    .hezi
    {
        width: 50px;
        height: 50px;
        background-color:steelblue;
    }
</style>
<body>
    <div></div>
    <div class="content">
        <div class="box">
            <div class="hezi"></div>
        </div>
    </div>
    <script type="text/javascript">
        var div =document.getElementsByTagName('div')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0]; 
        var hezi = document.getElementsByClassName('hezi')[0];
        box .addEventListener ('click',function(){
            console.log('a');
        },false)
        content.addEventListener('click',function(){
            console.log('b');
        },false)
        hezi.addEventListener('click',function(){
            console.log('c');
        },false)


    </script>
</body>
</html>

卷头发的秃头酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据属性获取div

获取属性需要注意的问题1.要根据class属性拿出这个div时，document.getElementsByClassName(‘prop’)[0];一它是className 二后面需要跟上[0]；因为class属性可能不止这一个不然就会出现 Cannot read property ‘addEventListener’ of undefined at的错误<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫