JavaScript DOM 樣式
在本教程中，你將學習如何在 JavaScript 中設定元素樣式。
JavaScript 中設定 DOM 元素的樣式
你還可以在 HTML 元素上應用樣式，以使用 JavaScript 動態更改 HTML 文件的視覺化表示。你可以為元素設定幾乎所有樣式，如字型、顏色、邊距、邊框、背景影象、文字對齊方式、寬度和高度、位置等。
在下一節中，我們將討論在 JavaScript 中設定樣式的各種方法。
在元素上設定內聯樣式
內聯樣式使用 style 屬性直接應用於特定 HTML 元素。在 JavaScript 中，style 屬性用於獲取或設定元素的內聯樣式。
以下示例將使用設定元素的顏色和字型屬性 id="intro" 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>
JavaScript 中 CSS 屬性的命名約定
許多 CSS 屬性，如 font-size，background-image ， text-decoration等在他們的名字中包含連字元（-）。因為，在 JavaScript 中，連字元是一個保留的運算子，並且它被解釋為減號，因此無法編寫表示式，如：elem.style.font-size。
因此，在 JavaScript 中，包含一個或多個連字元的 CSS 屬性名稱將轉換為大寫字母的樣式字。這是通過刪除連字元並在每個連字元後緊跟大寫字母來完成的，因此 CSS 屬性 font-size 變為 DOM 屬性 fontSize ， border-left-style 變為 borderLeftStyle 等等。
從元素中獲取樣式資訊
同樣，你可以使用 style 屬性在 HTML 元素上應用樣式。
以下示例將從元素中獲取樣式資訊 id="intro" 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Get Element's Style Demo</title>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Getting style information from element
alert(elem.style.color); // Outputs: red
alert(elem.style.fontSize); // Outputs: 20px
alert(elem.style.fontStyle); // Outputs nothing
</script>
</body>
</html>
style 從元素中獲取樣式資訊時，該屬性不是很有用，因為它只返回元素樣式屬性中設定的樣式規則，而不是來自其他地方的樣式規則，例如嵌入樣式表中的樣式規則或外部樣式表。
要獲取實際用於呈現元素的所有 CSS 屬性的值，可以使用 window.getComputedStyle() 方法，如以下示例所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
#intro {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Getting computed style information
var styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // Outputs: rgb(255, 0, 0)
alert(styles.getPropertyValue("font-size")); // Outputs: 20px
alert(styles.getPropertyValue("font-weight")); // Outputs: 700
alert(styles.getPropertyValue("font-style")); // Outputs: italic
</script>
</body>
</html>
提示： CSS 屬性font-weight的值 700 與關鍵字 bold 相同。顏色關鍵字 red 與顏色 rgb(255,0,0) 相同，即顏色的 rgb 表示法。
將 CSS 類新增到元素
你還可以使用屬性 className 為 HTML 元素獲取或設定 CSS 類 。
由於 class 是 JavaScript 中 的保留字，所以 JavaScript 使用 className 屬性來引用 HTML 類屬性的值。以下示例將說明如何新增新類，或將所有現有類替換為具有 id="info" 的 <div> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Add or Replace CSS Classes Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
Something very important!
<script>
// Selecting element
var elem = document.getElementById("info");
elem.className = "note"; // Add or replace all classes with note class
elem.className += " highlight"; // Add a new class highlight
</script>
</body>
</html>
有更好的方法來使用 CSS 類。你可以使用 classList 屬性輕鬆地從元素中獲取、設定或刪除 CSS 類。除了版本 10 之前的 Internet Explorer 之外，所有主流瀏覽器都支援此屬性。以下是一個示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
Something very important!
<script>
// Selecting element
var elem = document.getElementById("info");
elem.classList.add("hide"); // Add a new class
elem.classList.add("note", "highlight"); // Add multiple classes
elem.classList.remove("hide"); // Remove a class
elem.classList.remove("disabled", "note"); // Remove multiple classes
elem.classList.toggle("visible"); // If class exists remove it, if not add it
// Determine if class exist
if(elem.classList.contains("highlight")) {
alert("The specified class exists on the element.");
}
</script>
</body>
</html>