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-sizebackground-imagetext-decoration等在他们的名字中包含连字符(-)。因为,在 JavaScript 中,连字符是一个保留的运算符,并且它被解释为减号,因此无法编写表达式,如:elem.style.font-size

因此,在 JavaScript 中,包含一个或多个连字符的 CSS 属性名称将转换为大写字母的样式字。这是通过删除连字符并在每个连字符后紧跟大写字母来完成的,因此 CSS 属性 font-size 变为 DOM 属性 fontSizeborder-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 类

由于 classJavaScript 中保留字,所以 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>