在 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>