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