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>
效果：
捕获.PNG
注意：不管你是要获取那个标签的属性，必须要获取对应属性的标签节点，通过这个标签节点来获取其属性，并进行相应的操作。
（1）获取到标签的style属性节点：
var jsDivStyleNode = jsDiv.style;
console.log(jsDivStyleNode);
打印结果：
捕获.PNG
我们发现，获取到的结果是一个数组，里面包含了“box”标签的所有style属性。
（2）获取行间样式表中的样式
获取行间样式表中的样式有三种方法：
第一种：style属性节点 . 样式属性名
console.log(jsDivStyleNode.width);
console.log(typeof jsDivStyleNode.width);
结果：
捕获.PNG
发现他将标签的width属性值给打印出来了，同时通过typeof将该类型结果也打印出来了，发现它的基本类型是String类型。
第二种：元素节点 . style . 样式属性名
console .log(jsDiv.style.height);
结果：
捕获.PNG
同样能打印出结果
第三种：元素节点 . style[样式属性名]
console.log(jsDiv.style["height"]);
结果：
捕获.PNG
也一样能够打印出结果。个人推荐用第二种方法，因为更加简单快捷。
既然能活节点的样式属性，那么肯定能更开样式属性，请看以下内容！
（3）更改样式属性节点：
公式：元素节点 . style . 样式属性名 = 新的样式属性值
jsDiv.style.backgroundColor = "green";
结果：
捕获.PNG
我们发现在style中定义的背景颜色为“background-color:red”，但是在此方法中却是“backgroundColor = "green";”，所以，注意：
background-color如此CSS中带-符号的需要去掉-号，-号后面的单词首字母变大写，得到js中的对应样式属性名，切记啊小伙伴们。
好了，我们可以完善一下按钮事件：添加以下代码即可
function func() {
jsDiv.style.backgroundColor = randomColor();
}
效果自己看看，就不演示了。
2.总结
就到这儿了，下一节，说说内部样式表与外部样式表的读写，谢谢！！！
网友评论