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>