最新的Web開發教程
 

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>The paragraph above was changed by a script.</p>

</body>
</html>
試一試»

使用Events

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

事件由時“的事情發生”HTML元素的瀏覽器產生的:

  • 一個元件被點擊
  • 在頁面加載
  • 輸入字段改變

您將了解更多有關本教程的下一章事件。

這個例子改變了與HTML元素的樣式id="id1"當用戶點擊一個按鈕:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>
試一試»

更多示例

能見度如何使一個元素不可見。 你要顯示的元素或沒有?


HTML DOM Style對象參考手冊

對於所有的HTML DOM樣式屬性,看看我們的完整的HTML DOM Style對象參考


自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»