在 HTML 标签上,可以设定style
属性,借以改变元素的样式。例如:
<div style="color: #ffffff; background-color: #ff0000; width: 500px; height: 200px; padding-left: 250px; padding-top: 150px;">这是一段消息</div>
可以直接使用 JavaScript 设定style
特性上的各个特性来达到相同效果。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="message">这是一段消息</div>
<script type="text/javascript">
let message = document.getElementById('message');
message.style.color = '#ffffff';
message.style.backgroundColor = '#ff0000';
message.style.width = '500px';
message.style.height = '200px';
message.style.paddingLeft = '250px';
message.style.paddingTop = '150px';
</script>
</body>
</html>
按此观看执行结果。
style
特性参考的是CSSProperties
对象,要注意的是特性名称的大小写,通常是没有破折线、采驼峰式命名。一般不会或不建议使用标签的style
属性来设定样式,而会定义在样式表中。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
width: 500px;
height: 200px;
padding-left: 250px;
padding-top: 150px;
}
</style>
</head>
<body>
<div id="message">这是一段消息</div>
</body>
</html>
按此观看执行结果。
然而在这种情况下,无法使用style
特性来获取样式表中定义的各个样式信息,因为元素的style
特性是对应于标签的style
属性,标签若没有定义style
属性,或程序中没有设定style
的特性,就无法使用style
特性来获取样式信息。
标签的style
属性或透过元素的style
特性会覆盖样式表的设定,由于一般并不建议直接于标签上设定style
属性,因此透过程序时,通常建议将style
特性用于设定样式,而不是获取样式。
如果标签没有设定style
属性,而想要获取元素上套用的样式信息,则必须获取元素的计算样式(Computed style),计算样式是指所有样式规则(包括样式表、style
属性)已套用至元素后的样式结果。
若是在标准浏览器中,可以使用window
的getComputedStyle
函数(与document.defaultView.getComputedStyle
是相同函数),获取的样式对象是只读的CSS2Properties
对象,可以直接如同使用style
特性,直接于上指定特性来获取样式信息,或是使用getPropertyValue()
方法指定 CSS 属性。
getComputedStyle
的第二个实参可指定虚拟类(pseudo-class),如果不设定的话,也必须指定null
,例如:
window.getComputedStyle(elem, null)[prop];
来使用程序获取上一个范例网页的 CSS 样式设定:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
width: 500px;
height: 200px;
padding-left: 250px;
padding-top: 150px;
}
</style>
</head>
<body>
<div id="message">这是一段消息</div>
<span id="console"></span>
<script type="text/javascript">
function style(elem, prop) {
return window.getComputedStyle(elem, null)[prop];
}
let message = document.getElementById('message');
let color = style(message, 'backgroundColor');
document.getElementById('console').innerHTML = color;
</script>
</body>
</html>
按此观看执行结果。