JS DOM样式 – JavaScript教程 JSDOM样式|JavaScript

上一章JavaScript教程请查看：JS DOM选择器
在本教程中，你将学习如何在JavaScript中设置元素的样式。
在JavaScript中设置DOM元素的样式你可以在HTML元素上应用CSS样式，从而使用JavaScript动态地更改HTML文档的视觉表示。你可以为元素设置几乎所有的样式，如字体、颜色、边距、边框、背景图像、文本对齐、宽度和高度、位置等。
在下一节中，我们将讨论在JavaScript中设置样式的各种方法。
在元素上设置内联样式内联样式使用样式属性直接应用于特定的HTML元素，在JavaScript中，style属性用于获取或设置元素的内联样式。
【JS DOM样式 – JavaScript教程】下面的示例将设置id=” intro” 元素的颜色和字体属性。

< !DOCTYPE html> < head> < meta charset="utf-8"> < title>JS设置内联样式< /title> < /head> < body> < p id="intro">段落1< /p> < p>文本段落< /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属性，例如字体大小、背景图像、文本装饰等，在它们的名称中都包含连字符(-)。因为在JavaScript中连字符是一个保留操作符，它被解释为一个负号，所以不可能编写一个表达式，比如: element .style.font-size
因此，在JavaScript中，包含一个或多个连字符的CSS属性名将转换为大写样式字。这是通过删除连字符并将每个连字符后面的字母大写来实现的，因此CSS属性font-size变为DOM属性fontSize, border-left-style变为borderLeftStyle，等等。
从元素中获取样式信息类似地，可以使用style属性在HTML元素上应用样式。
下面的示例将从id=” intro” 的元素中获取样式信息。

< !DOCTYPE html> < head> < meta charset="utf-8"> < title>JS从元素中获取样式信息< /title> < /head> < body> < p id="intro" style="color:red; font-size:20px; ">文本段落1< /p> < p>文本段落2< /p>< script> // 选择元素 var elem = document.getElementById("intro"); // 获取样式信息 alert(elem.style.color); // : red alert(elem.style.fontSize); // : 20px alert(elem.style.fontStyle); // nothing < /script> < /body> < /html>

当从元素中获取样式信息时，style属性不是很有用，因为它只返回元素的样式属性中设置的样式规则，而不是来自其他地方的样式规则，比如嵌入的样式表或外部样式表中的样式规则。
要获取实际用于呈现元素的所有CSS属性的值，可以使用window.getComputedStyle()方法，如下面的示例所示:

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title>JS获取计算样式< /title> < style type="text/css"> #intro { font-weight: bold; font-style: italic; } < /style> < /head> < body> < p id="intro" style="color:red; font-size:20px; ">文本段落1< /p> < p>文本段落2< /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表示法。
向元素中添加CSS类你还可以使用className属性获取或设置HTML元素的CSS类。
因为class在JavaScript中是一个保留字，所以JavaScript使用className属性来引用HTML class属性的值。下面的示例将演示如何添加新类，或将所有现有类替换为id=” info” 的< div> 元素。

< !DOCTYPE html> < head> < meta charset="utf-8"> < title>JS添加或替换CSS类Demo< /title> < style> .highlight { background: yellow; } < /style> < /head> < body> < div id="info" class="disabled">非常重要的东西!< /div>< script> // 选择元素 var elem = document.getElementById("info"); elem.className = "note"; // 用note类添加或替换所有类 elem.className += " 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> < div id="info" class="disabled">非常重要的东西!< /div>< script> // 选择元素 var elem = document.getElementById("info"); elem.classList.add("hide"); // 添加类 elem.classList.add("note", "highlight"); // 添加多个类 elem.classList.remove("hide"); // 删除类 elem.classList.remove("disabled", "note"); // 删除多个类 elem.classList.toggle("visible"); // 如果类存在，则删除它，如果不添加它// Determine if class exist if(elem.classList.contains("highlight")) { alert("指定的类存在元素上"); } < /script> < /body> < /html>