通过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)