JavaScript 如何動態改變 HTML 元素樣式？-css教學-PHP中文網

JavaScript 如何動態改變 HTML 元素樣式？

Mary-Kate Olsen

發布： 2024-12-10 14:05:10

原創

903 人瀏覽過

How Can JavaScript Dynamically Change HTML Element Styles?

使用 JavaScript 動態變更元素樣式

在 Web 開發領域，經常會出現需要動態調整元素視覺外觀的情況。 JavaScript，一種動態程式語言，為此提供了強大的解決方案。

操縱元素樣式的一種方法是透過 HTML DOM（文件物件模型）。此屬性可讓您存取和修改與元素關聯的內聯樣式。

例如，如果您有一個

具有已定義樣式表的元素，並且您想要修改其padding-top 屬性，您可以使用JavaScript 實現此目的，如下所示：

document.getElementById("xyz").style.paddingTop = "10px";

登入後複製

這行程式碼從HTML 文件。然後它存取元素的 style 屬性並將 paddingTop 屬性設為「10px」。

除了上面範例中使用的點表示法之外，您還可以指定使用破折號表示法的樣式屬性與某些 CSS 屬性名稱相容。在這種情況下，您將使用：

document.getElementById("xyz").style["padding-top"] = "10px";

登入後複製

兩種方法產生相同的結果，讓您可以使用 JavaScript 動態修改網頁上元素的樣式。

以上是JavaScript 如何動態改變 HTML 元素樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！