JavaScript/Changing element styles

維基教科書,自由的教學讀本

要更改元素的樣式屬性,請更改與元素的「樣式」參數下的屬性關聯的值。 讓我們繼續上一節中的按鈕示例:

<input type="button" id="myButton" value="I'm a button!">

假設我們希望隱藏具有顯示樣式屬性的按鈕。在 CSS 中,這將通過以下方式完成:

#myButton { display: none; }

如果按鈕最初應該是可見的,但我們想稍後用 JavaScript 隱藏它,這將通過以下方式完成:

myButton = document.getElementById("myButton"); //searches for & detects input element of 'myButton' id
myButton.style.display = "none"; //hides the element

連字符樣式[編輯]

一些樣式屬性是連字符的。在這種情況下,相關的 JavaScript 屬性沒有連字符,但出現在連字符之後的字母大寫。(這被稱為「駝峰式大小寫」。)

例如,假設我們希望按鈕的文本是粗體的。在 CSS 中,這將通過以下方式完成:

#myButton { font-weight: bold; }

如果按鈕最初應該是正常的,但我們想稍後使用 JavaScript 使其文本變為粗體,則可以這樣做:

myButton = document.getElementById("myButton"); //searches for & detects input element of 'myButton' id
myButton.style.fontWeight = "bold"; //makes the text bold