0.前言
上一節(jié)主要是說了節(jié)點(diǎn)的獲取方法，但是在JavaScript中不同的css載入方式该默，獲取的節(jié)點(diǎn)的屬性也不同案糙，所以今天來說說在行間樣式表中獲取節(jié)點(diǎn)，行間樣式表也叫內(nèi)聯(lián)樣式表送粱，不懂得朋友褪贵，自己學(xué)習(xí)啊抗俄！
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">
//獲取到標(biāo)簽節(jié)點(diǎn)
var jsDiv = document.getElementById("box");
</script>
</body>
</html>
效果：
捕獲.PNG
注意：不管你是要獲取那個(gè)標(biāo)簽的屬性槽卫，必須要獲取對(duì)應(yīng)屬性的標(biāo)簽節(jié)點(diǎn)，通過這個(gè)標(biāo)簽節(jié)點(diǎn)來獲取其屬性胰蝠，并進(jìn)行相應(yīng)的操作歼培。
（1）獲取到標(biāo)簽的style屬性節(jié)點(diǎn)：
var jsDivStyleNode = jsDiv.style;
console.log(jsDivStyleNode);
打印結(jié)果：
捕獲.PNG
我們發(fā)現(xiàn)，獲取到的結(jié)果是一個(gè)數(shù)組姊氓，里面包含了“box”標(biāo)簽的所有style屬性丐怯。
（2）獲取行間樣式表中的樣式
獲取行間樣式表中的樣式有三種方法：
第一種：style屬性節(jié)點(diǎn) . 樣式屬性名
console.log(jsDivStyleNode.width);
console.log(typeof jsDivStyleNode.width);
結(jié)果：
捕獲.PNG
發(fā)現(xiàn)他將標(biāo)簽的width屬性值給打印出來了，同時(shí)通過typeof將該類型結(jié)果也打印出來了翔横，發(fā)現(xiàn)它的基本類型是String類型读跷。
第二種：元素節(jié)點(diǎn) . style . 樣式屬性名
console .log(jsDiv.style.height);
結(jié)果：
捕獲.PNG
同樣能打印出結(jié)果
第三種：元素節(jié)點(diǎn) . style[樣式屬性名]
console.log(jsDiv.style["height"]);
結(jié)果：
捕獲.PNG
也一樣能夠打印出結(jié)果。個(gè)人推薦用第二種方法禾唁，因?yàn)楦雍?jiǎn)單快捷效览。
既然能活節(jié)點(diǎn)的樣式屬性无切，那么肯定能更開樣式屬性，請(qǐng)看以下內(nèi)容丐枉！
（3）更改樣式屬性節(jié)點(diǎn)：
公式：元素節(jié)點(diǎn) . style . 樣式屬性名 = 新的樣式屬性值
jsDiv.style.backgroundColor = "green";
結(jié)果：
捕獲.PNG
我們發(fā)現(xiàn)在style中定義的背景顏色為“background-color:red”哆键，但是在此方法中卻是“backgroundColor = "green";”，所以瘦锹，注意：
background-color如此CSS中帶-符號(hào)的需要去掉-號(hào)籍嘹，-號(hào)后面的單詞首字母變大寫，得到j(luò)s中的對(duì)應(yīng)樣式屬性名弯院，切記啊小伙伴們辱士。
好了，我們可以完善一下按鈕事件：添加以下代碼即可
function func() {
jsDiv.style.backgroundColor = randomColor();
}
效果自己看看听绳，就不演示了颂碘。
2.總結(jié)
??就到這兒了，下一節(jié)椅挣，說說內(nèi)部樣式表與外部樣式表的讀寫头岔，謝謝！Ｊ笾ぁ峡竣！
