js对象获取属性的方法(.和[]方式)，这两者有和不同？

最新推荐文章于 2024-01-21 08:09:39 发布

weixin_34375054

最新推荐文章于 2024-01-21 08:09:39 发布

阅读量919

点赞数

原文链接：https://juejin.im/post/5cf8799af265da1b7a4b6410

版权

前言：

今天封装了一个函数，发现写的时候用 [ ] 就可以， . 就不可以,就觉得非常奇怪，后来查看了一些大佬的技术博客之后，终于弄懂了这个问题，下面我跟大家分享一下。

代码：获取任意一个元素的任意属性

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background: pink;
        /* position: absolute; */
        left: 100px;
        top:50px;
    }
</style>
    
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box"></div> 
    <script>
        var box = document.getElementById('box'); 
        function getStyle(element,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(element,null)[attr];
            }else{
                return element.currentStyle[attr];
            }
        }
        document.getElementById('btn').onclick=function(){
            // console.log(box.offsetLeft)
            console.log(getStyle(box,'top'));   //50px，是一个字符串类型
        }
    </script>
</body>
复制代码

注意： 以上代码若将[attr]换成.attr就获取不到了，原因就是 通过.方式获取属性值，key是静态的，通过[]获取属性值, key是动态的，可以是字符串，或者数字的形式，那这里的attr是我传的参数，值是可变的，当然就不可以用.的方式获取属性值啦~小伙伴们不要采坑哦！

转载于:https://juejin.im/post/5cf8799af265da1b7a4b6410

weixin_34375054

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js对象获取属性的方法(.和[]方式)，这两者有和不同？

前言：今天封装了一个函数，发现写的时候用 [ ] 就可以， . 就不可以,就觉得非常奇怪，后来查看了一些大佬的技术博客之后，终于弄懂了这个问题，下面我跟大家分享一下。代码：获取任意一个元素的任意属性<style> *{ margin: 0; padding: 0; } #box{ width: 100px;...
复制链接

扫一扫