在 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>按此观看执行结果。
