【JavaScript】使用DOM修改和查询CSS内联样式

2023-04-20 49

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【JavaScript】使用DOM修改和查询CSS内联样式

+关注继续查看

修改样式

语法：元素名.style.样式名 = "样式值"

html：

<div id="box1">
    <button id="bt1">点我改变样式</button>
    <button id="bt2">点击查看样式</button>
</div>

css：

#box1{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }

javascript：

注意：css样式名中有-号，在js中是不合规范的，比如这里的background-color,在js中需要用驼峰命名法表示，即backgroundColor来表示。修改其他属性也是如此。

window.onload = function(){
    //获取box1
    var box1 = document.getElementById('box1');
    //获取bt1
    var bt1 = document.getElementById('bt1');
    //添加单击响应函数
    bt1.onclick = function(){
        //修改宽度
        box1.style.width = '300px';
        box1.style.height = '300px';
        box1.style.backgroundColor = 'lightblue';
    }
}

我们通过这种方式实际上是对内联样式进行修改，而内联样式的优先级是大于样式表的样式的，因此，此方法会直接覆盖掉样式表的样式。

查找样式值

第一种方法：

语法：元素名.style.样式名

javascript：

window.onload = function(){
    //获取box1
    var box1 = document.getElementById('box1');
    //获取bt2
    var bt2 = document.getElementById('bt2');
    //添加单击响应函数
    bt2.onclick = function(){
      //查看内联样式
        alert(box1.style.width);
        alert(box1.style.height);
        alert(box1.style.backgroundColor);
    }
}

直接获取样式值。缺点：这种方法只能获取到css的内联样式，获取不到样式表中的样式。

如图：

第二种方法

语法：getComputedStyle(要获取样式的元素,伪元素（一般都传入null值）)

此方法返回的是一个对象，要获取样式值则需要通过这个方法去调用属性

window.onload = function(){
    //获取box1
    var box1 = document.getElementById('box1');
    //获取bt2
    var bt2 = document.getElementById('bt2');
    //添加单击响应函数
    bt2.onclick = function(){
      //查看当前样式
     var obj = getComputedStyle(box1,null);
     alert(obj.width);
     alert(obj.height);
     alert(obj.backgroundColor);
    }
}

此方法可以获取到你当前生效的css样式值，无论是内联样式亦或者是css样式表内的样式。颜色返回的是rgb格式。

更多DOM元素方法前看此文档：

HTML DOM Element 对象