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>
// 选择元素
var elem = document.getElementById("intro");
// 在元素上应用样式
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>
// 选择元素
var elem = document.getElementById("intro");
// 从元素获取样式信息
alert(elem.style.color); // 输出： red
alert(elem.style.fontSize); // 输出： 20px
alert(elem.style.fontStyle); // 无输出
</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>
// 选择元素
var elem = document.getElementById("intro");
// 获取计算的样式信息
var styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // 输出： rgb(255, 0, 0)
alert(styles.getPropertyValue("font-size")); // 输出： 20px
alert(styles.getPropertyValue("font-weight")); // 输出： 700
alert(styles.getPropertyValue("font-style")); // 输出： italic
</script>
</body>
</html>提示： CSS 属性 font-weight 的值 700 与关键字 bold 相同。 颜色关键字 red 与 rgb(255,0,0) 相同，是一种颜色的 rgb notation。
向元素添加 CSS 类
您还可以使用 className 属性获取或设置 CSS 类 到 HTML 元素。
因为，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>
<div id="info" class="disabled">Something very important!</div>
<script>
// 选择元素
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 类。 除 Internet Explorer 10 之前的版本外，所有主要浏览器都支持此属性。下面是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
<div id="info" class="disabled">Something very important!</div>
<script>
// 选择元素
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>