JavaScript获取DOM元素相关信息和属性

最新推荐文章于 2024-04-26 16:47:03 发布

隐藏用户y

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1k

点赞数 1

分类专栏：前端入门文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_55355282/article/details/128106261

版权

前端入门专栏收录该内容

42 篇文章 0 订阅

订阅专栏

getBoundingClientRect

获取到元素盒模型的一些信息,得到的结果是没有单位的,不包含滚动条的距离,不包含margin，包含border和padding
width 宽度（包含边框）
height 高度（包含边框）
left 从元素最左边到可视区最左边距离
right 从元素最右边到可视区最左边距离
top 从元素的最上边到可视区最上边的距离
bottom 从元素的最下边到可视区最上边的距离

    <style>
        #box {
            width: 100px;
            height: 100px;
            background: #f00;
            position: absolute;
            left: 300px;
            top: 200px;
        }
    </style>
</head>

<body style="height: 1000px;">
    <script>
        window.onload = function () {
            var box = document.getElementById("box");

            var message = box.getBoundingClientRect();
            console.log(message);

            console.log(message.width);//100
            console.log(message.height);//100
            console.log(message.left);//300
            console.log(message.right);//400
            console.log(message.top);//200
            console.log(message.bottom);//300
        }
    </script>
    <div id="box"></div>
</body>

给body添加一个高度的样式，从而出现滚动条，但是对盒子无影响

getAttribute

用来获取元素的属性
元素.getAttribute(属性名)

如果参数是一个src或者href的话，打印结果是引号里面的值（相对地址）
取不到js的自定义属性
可以取到html的自定义属性

<script>
        window.onload = function () {
            var box = document.getElementById("box");
            var pic = document.getElementById("pic");

            console.log(box.id);//box
            console.log(pic['src']);//file:///D:/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E7%AC%94%E8%AE%B0/img/1.jpg

            console.log(box.getAttribute('class'));//color
            console.log(pic.getAttribute('src'));//../网页制作笔记/img/1.jpg

            box.index = 1;
            console.log(box.index);//1
            console.log(box.getAttribute('index'));//null

            console.log(box);//<div id="box" class="color" n="121"><img src="../网页制作笔记/img/1.jpg" alt="" id="pic"></div>

            console.log(box.n);//undefined
            console.log(box['n']);//undefined

            console.log(box.getAttribute('n'));//121

            console.log(box['data-v']);//undefined
            console.log(box.dataset.v);//xaiogou
        }
    </script>
    <div id="box" class="color" n="121" data-v="xaiogou">
        <img src="../网页制作笔记/img/1.jpg" alt="" id="pic">
    </div>

setAttribute

设置属性
元素.setAttribute(attr,value);
两个元素必须同时出现

<body>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");

            box.setAttribute('id', 'box2');
            console.log(box);

            // box.setAttribute('n', 'xiaogou');
            // console.log(box);

            // box.setAttribute('style', 'width:200px;height:100px');
            // console.log(box);

        }
    </script>
    <div id="box" class="color" n="121" data-v="xaiogou" style="width: 100px;;">
        <img src="../网页制作笔记/img/1.jpg" alt="" id="pic">
    </div>
</body>

运行结果截图1
在这里插入图片描述
运行结果截图2

运行结果截图3

removeAttribute

删除属性
元素.removeAttrrbute(属性名)

removeAttribute

删除属性
元素.removeAttrrbute(属性名)

<body>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");

            box.removeAttribute('n');
            console.log(box);
        }
    </script>
    <div id="box" class="color" n="121" data-v="xaiogou" style="width: 100px;;">
        <img src="../网页制作笔记/img/1.jpg" alt="" id="pic">
    </div>
</body>

运行结果截图
在这里插入图片描述

隐藏用户y

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript获取DOM元素相关信息和属性

获取到元素盒模型的一些信息,得到的结果是没有单位的,不包含滚动条的距离,不包含margin，包含border和paddingwidth 宽度（包含边框）height 高度（包含边框）left 从元素最左边到可视区最左边距离从元素最右边到可视区最左边距离top 从元素的最上边到可视区最上边的距离从元素的最下边到可视区最上边的距离给body添加一个高度的样式，从而出现滚动条，但是对盒子无影响。
复制链接

扫一扫