style[attr]和style.attr的问题

最新推荐文章于 2021-05-25 20:56:04 发布

chen1057376155

最新推荐文章于 2021-05-25 20:56:04 发布

阅读量1.5k

点赞数 4

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/chen1057376155/article/details/51056341

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前段日子对这两个问题有点混淆，不知道是最近写js写得多了，恍恍惚惚之间就明白是什么意思了
先来段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .one{
                width: 100px;
                height: 200px;
                background:red;
            }
        </style>
    </head>
    <body>
        <div class="one">

        </div>
    </body>
    <script type="text/javascript">
    window.onload=function(){
    //获取第一个类名one
        var one=document.getElementsByClassName("one")[0];
        //为这个div添加一个点击事件
        //这个点击事件点击之后执行设置样式的函数
        one.onclick=function(){
            setStyle(this,'background','yellow');
        }
    }
    //定义一个设置样式的函数
        function setStyle(obj,attr,value){
            obj.style[attr]=value;
//          obj.style.attr=value;
        }
    </script>
</html>

以上是一个小小的demo，想要说明的问题也很简单，style[attr]说白就是传值，将使用设置样式的函数传入的值进行获取
而，style.attr并没有获取到传入的值，因为这里的attr是style的一个属性，而这个属性应该是不存在的，那么style就没有办法设置你想要的样式，因为没有获取到你想要的设置的值

chen1057376155

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style[attr]和style.attr的问题

前段日子对这两个问题有点混淆，不知道是最近写js写得多了，恍恍惚惚之间就明白是什么意思了先来段代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .one{ width: 100p
复制链接

扫一扫