DOM啟蒙：元素節點內聯樣式
阿新 • • 發佈：2018-12-17
1.樣式屬性概覽
每個HTML元素都有個style屬性，可以用來插入針對該元素的內聯CSS屬性。
注意：style屬性返回一個CSSStyleDeclaration物件，而不是一個字串。該CSSStyleDeclaration都僅包含該元素的內聯樣式。
2.獲取、設定及移除單個內聯CSS屬性
1. 內聯CSS樣式都各自表示為元素節點style物件的一個個屬性，即可獲得、設定或移除某個元素上單個CSS屬性的介面。
style物件中的屬性名使用駝峰結構。如果CSS屬性名是個JavaScript關鍵字，則JavaScript CSS屬性名會被加css字首。
對於任何需要度量單位的CSS屬性，記得包含合適的單位。
2.style物件提供了以下方法來操作某個元素節點上的單個CSS屬性
- getPropertyValue（"propertyName"）；
- setPropertyValue（"propertyName","value"）；
- removeProperty（"propertyName"）；
注意：傳給以上方法的屬性名稱是有橫線的CSS屬性名稱
3.獲取、設定及移除所有內聯CSS屬性
- cssText
- getAttribute（"style"）、setAttribute（"style"，"value"），removeAttribute（"style"）
4.使用getComputedStyle（）獲取元素的已計算樣式
- getComputedStyle（）：
可獲得元素級聯包括內聯樣式後的CSS。
該方法提供一個只讀的類似style的CSSStyleDeclaration物件。
遵照CSS宣告優先順序。
返回的顏色值格式為rgb（#，#，#）。
5.使用class及id屬性應用或者移除元素上的CSS屬性
操作元素樣式最普遍的模式：
定義在內聯樣式表單或者外部樣式表單的樣式規則可以通過操作元素上的class或id屬性新增或移除
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.foo{
background-color:red;
padding:10px;
}
#bar{
border:10px solid #000;
margin:10px;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
div.setAttribute("id","bar");
div.classList.add("foo");
</script>
</body>
</html>