JavaScript HTML DOM - 改變 CSS

HTML DOM 允許 JavaScript 更改 HTML 元素的樣式。

改變 HTML 樣式

如需更改 HTML 元素的樣式，請使用此語法：

document.getElementById(id).style.property = new style

下面的例子更改了 <p> 元素的樣式：

實例

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>上面的段落已被腳本改變。</p>
</body>
</html>

親自試一試

使用事件

HTML DOM 允許您在事件發生時執行代碼。

當“某些事情”在 HTML 元素上發生時，瀏覽器會生成事件：

  • 點擊某個元素時
  • 頁面加載時
  • 輸入字段被更改時

您將在本教程的下一章學到更多有關事件的知識。

本例會在用戶點擊按鈕時，更改 id="id1" 的 HTML 元素的樣式：

實例

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的標題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
點擊我！
</button>
</body>
</html>

親自試一試

更多實例

Visibility
如何使元素不可見。您是否希望顯示元素？

HTML DOM Style 對象參考手冊

如需所有 HTML DOM 樣式屬性，請訪問我們的 HTML DOM Style 對象參考手冊。