0.前言
上一节主要是说了节点的获取方法,但是在JavaScript中不同的css载入方式,获取的节点的属性也不同,所以今天来说说在行间样式表中获取节点,行间样式表也叫内联样式表,不懂得朋友,自己学习啊!
1.正文
我们来用代码说明问题,显得更加直观,也能方便“童鞋”们的理解。首先大框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间样式表的读写</title>
</head>
<body>
<div id="box" style="width:100px;height:200px;background-color:red"></div>
<button onclick="func()">换颜色</button>
<script type="text/javascript" src="sunckBase.js"></script>
<script type="text/javascript">
//获取到标签节点
var jsDiv = document.getElementById("box");
</script>
</body>
</html>
效果:
注意:不管你是要获取那个标签的属性,必须要获取对应属性的标签节点,通过这个标签节点来获取其属性,并进行相应的操作。
(1)获取到标签的style属性节点:
var jsDivStyleNode = jsDiv.style;
console.log(jsDivStyleNode);
打印结果:
我们发现,获取到的结果是一个数组,里面包含了“box”标签的所有style属性。
(2)获取行间样式表中的样式
获取行间样式表中的样式有三种方法:
第一种:style属性节点 . 样式属性名
console.log(jsDivStyleNode.width);
console.log(typeof jsDivStyleNode.width);
结果:
发现他将标签的width属性值给打印出来了,同时通过typeof将该类型结果也打印出来了,发现它的基本类型是String类型。
第二种:元素节点 . style . 样式属性名
console .log(jsDiv.style.height);
结果:
同样能打印出结果
第三种:元素节点 . style[样式属性名]
console.log(jsDiv.style["height"]);
结果:
也一样能够打印出结果。个人推荐用第二种方法,因为更加简单快捷。
既然能活节点的样式属性,那么肯定能更开样式属性,请看以下内容!
(3)更改样式属性节点:
公式:元素节点 . style . 样式属性名 = 新的样式属性值
jsDiv.style.backgroundColor = "green";
结果:
我们发现在style中定义的背景颜色为“background-color:red”,但是在此方法中却是“backgroundColor = "green";”,所以,注意:
background-color如此CSS中带-符号的需要去掉-号,-号后面的单词首字母变大写,得到js中的对应样式属性名,切记啊小伙伴们。
好了,我们可以完善一下按钮事件:添加以下代码即可
function func() {
jsDiv.style.backgroundColor = randomColor();
}
效果自己看看,就不演示了。
2.总结
就到这儿了,下一节,说说内部样式表与外部样式表的读写,谢谢!!!