快捷導(dǎo)航

javascript DOM設(shè)置樣式詳細(xì)說(shuō)明和示例代碼

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

JavaScript也可以用來(lái)修改DOM元素的樣式,我們可以使用style屬性來(lái)訪問(wèn)和修改元素的樣式屬性,這篇文章主要給大家介紹了關(guān)于javascript DOM設(shè)置樣式詳細(xì)說(shuō)明和示例代碼的相關(guān)資料,需要的朋友可以參考下

前言

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

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

通過(guò)元素的style屬性，你可以直接讀取或設(shè)置內(nèi)聯(lián)樣式屬性。注意，這種方式會(huì)覆蓋外部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);

二、通過(guò)類名改變樣式

另一種更推薦的方式是通過(guò)添加、移除CSS類名來(lái)改變?cè)貥邮剑@樣可以更好地利用CSS的層疊加重載機(jī)制和緩存。

示例代碼

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ì)算后的樣式

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

示例代碼

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

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