JavaScript中DOM操作内联样式和查询元素样式

最新推荐文章于 2021-05-14 20:57:56 发布

冰雪奇缘lb

最新推荐文章于 2021-05-14 20:57:56 发布

阅读量248

点赞数

分类专栏： JavaScript复盘重点总结

本文链接：https://blog.csdn.net/weixin_44682587/article/details/115301326

版权

JavaScript复盘重点总结专栏收录该内容

28 篇文章 2 订阅

订阅专栏

通过JS修改元素的样式

语法：元素.style.样式名 = 样式值
注意：
（1）如果CSS的样式中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法backgroundColor，去掉-，然后将-后的子母大写。

（2）我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。内联样举例：<div style="color: yellow"></div>

（3）如果在样式中写了!important，则此时样式会有较高的优先级，及时通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。

使用举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id="box1"></div>
        <button id="btn01">改变样式</button>
	</body>
    <script>
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
           box1.style.width = "300px";
           box1.style.height = "300px";
           box1.style.backgroundColor = "yellow";
        }
    </script>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</html>

查询元素样式

在其他浏览器可以使用（除了IE8以及以下）
getComputedStyle()这个方法获取元素当前的样式，这个方法是window的方法，可以直接使用，需要两个参数：
（1）获取样式的元素
（2）可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式

var obj = getComputedStyle(box1,null);
alert(obj.width)

冰雪奇缘lb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中DOM操作内联样式和查询元素样式

通过JS修改元素的样式语法：元素.style.样式名 = 样式值注意：（1）如果CSS的样式中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法backgroundColor，去掉-，然后将-后的子母大写。（2）我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。内联样举例：<div style="color: yellow"></div>（3）如果在样式中写了
复制链接

扫一扫

专栏目录