js学习笔记82——操作内联样式
看如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn01">点我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
如何通过点击按钮来改变box1的大小?
通过js修改元素的样式
语法:元素.style.样式名 = 样式值
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
box1.style.width = "200px";
};
};
</script>
如果想修改背景颜色,可以这么写吗?
box1.style.background-color = "yellow";
会报措
那如何做呢?
用驼峰命名法
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
box1.style.width = "200px";
box1.style.height = "200px";
box1.style.backgroundColor = "yellow";
};
};
查参考手册
内联样式
可以看到,通过style属性设置的样式都是内联样式。
内联样式的好处是,设置的样式优先级比较高。
当然优先级最高的不是内联样式,如果我给背景颜色设置!important,则它的优先级最高。js将不起作用。所以尽量不要使用!important。
#box1{
width: 100px;
height: 100px;
background-color: red !important;
}
读取元素的样式
语法:元素.style.样式名
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
alert(box1.style.height);
};
从上图可以看到,我直接点btn02读取到的是空,得先按btn01再按btn02才获取到样式。为什么?
通过style属性设置和读取的都是内联样式,所以如果我直接点击获取,由于高度并不在内联样式里,所以读不到。