javascript DOM設置樣式詳細說明和示例代碼

更新時間：2024年06月26日 09:46:06 作者：還是大劍師蘭特

JavaScript也可以用來修改DOM元素的樣式,我們可以使用style屬性來訪問和修改元素的樣式屬性,這篇文章主要給大家介紹了關于javascript DOM設置樣式詳細說明和示例代碼的相關資料,需要的朋友可以參考下

前言

在JavaScript中操作DOM樣式是實現(xiàn)動態(tài)頁面效果和交互的關鍵。你可以直接修改元素的內(nèi)聯(lián)樣式，也可以通過改變類名來應用CSS類樣式。以下是詳細的說明和示例代碼。

一、直接操作內(nèi)聯(lián)樣式

通過元素的style屬性，你可以直接讀取或設置內(nèi)聯(lián)樣式屬性。注意，這種方式會覆蓋外部CSS樣式。

示例代碼

// 獲取并修改樣式
let element = document.getElementById("myElement");
element.style.color = "red"; // 改變顏色
element.style.fontSize = "20px"; // 改變字體大小

// 讀取樣式
let color = element.style.color;
let fontSize = element.style.fontSize;
console.log(color, fontSize);

二、通過類名改變樣式

另一種更推薦的方式是通過添加、移除CSS類名來改變元素樣式，這樣可以更好地利用CSS的層疊加重載機制和緩存。

示例代碼

HTML部分：

<style>
.active {
    color: red;
    font-size: 20px;
}
</style>

JavaScript部分：

let element = document.getElementById("myElement");

// 添加類名
element.classList.add("active");

// 移除類名
element.classList.remove("active");

// 切換類名（如果存在則移除，否則添加）
element.classList.toggle("active");

// 檢查是否有某類名
let isActive = element.classList.contains("active");

三、使用getComputedStyle讀取計算后的樣式

有時，你需要獲取經(jīng)過CSS計算后的樣式值，而不是直接的內(nèi)聯(lián)樣式，這時可以使用window.getComputedStyle。

示例代碼

let element = document.getElementById("myElement");
let computedStyle = window.getComputedStyle(element);

let color = computedStyle.color;
let fontSize = computedStyle.fontSize;
console.log(color, fontSize);