在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對象參考 。