JavaScript改變HTML樣式的主要方式
一、直接修改元素的 style 屬性
通過(guò) DOM 元素的 style 屬性直接設(shè)置內(nèi)聯(lián)樣式，優(yōu)先級(jí)最高：
// 修改單個(gè)樣式
document.getElementById("box").style.color = "blue";
// 修改多個(gè)樣式（推薦使用 cssText）
document.getElementById("box").style.cssText = "width: 200px; height: 100px;";
- 適用場(chǎng)景：簡(jiǎn)單、臨時(shí)的樣式調(diào)整（如點(diǎn)擊按鈕改變顏色）。
- 注意：屬性名需使用駝峰寫法（如
backgroundColor而非background-color）。
二、通過(guò)類名（className/classList）切換樣式
1. className 屬性
直接替換元素的類名，適合整體樣式切換：
element.className = "new-class"; // 覆蓋原有類
2. classList 方法（推薦）
使用 classList 可精細(xì)控制類名，避免覆蓋：
element.classList.add("active"); // 添加類
element.classList.remove("hidden"); // 移除類
element.classList.toggle("dark-mode"); // 切換類
- 適用場(chǎng)景：主題切換、響應(yīng)式布局（如移動(dòng)端菜單顯示/隱藏）。
三、操作 CSS 樣式表
1. 修改外部樣式表鏈接
動(dòng)態(tài)切換外部 CSS 文件實(shí)現(xiàn)全局主題更換：
const link = document.querySelector('link[href="light.css" rel="external nofollow" ]');
link.href = "dark.css"; // 替換為暗色主題文件
2. 修改 <style> 標(biāo)簽內(nèi)容
直接插入或替換嵌入式樣式規(guī)則：
const style = document.createElement('style');
style.innerHTML = `.box { border: 2px solid red; }`;
document.head.appendChild(style);
四、動(dòng)態(tài)創(chuàng)建 CSS 規(guī)則
通過(guò) insertRule() 方法向現(xiàn)有樣式表添加新規(guī)則：
const sheet = document.styleSheets[0]; // 獲取第一個(gè)樣式表
sheet.insertRule(".error { color: red; }", 0); // 在索引0位置插入規(guī)則
五、事件驅(qū)動(dòng)的樣式修改
結(jié)合事件監(jiān)聽實(shí)現(xiàn)交互式樣式變化：
<button id="btn">切換主題</button>
<script>
document.getElementById("btn").addEventListener("click", () => {
document.body.classList.toggle("dark-theme");
});
</script>
六、性能優(yōu)化與最佳實(shí)踐
1. 減少重繪與回流
避免頻繁修改 style 屬性，優(yōu)先使用 classList 批量修改。
2. 使用 CSS 變量
通過(guò) JavaScript 動(dòng)態(tài)修改 CSS 變量實(shí)現(xiàn)高效主題管理：
document.documentElement.style.setProperty("--main-color", "#ff0000");
3. 防抖與節(jié)流
對(duì)高頻觸發(fā)的樣式修改（如滾動(dòng)事件）進(jìn)行性能優(yōu)化。
七、兼容性處理
- 使用
classList時(shí)需注意 IE10 及以下不支持，可用className配合字符串操作替代。 - 修改樣式表時(shí)，優(yōu)先檢測(cè)
insertRule和deleteRule的兼容性。
總結(jié)
JavaScript 改變 HTML 樣式的主要方式包括：
- 直接操作
style屬性（適合簡(jiǎn)單調(diào)整）。 - 通過(guò)類名切換樣式（推薦
classList）。 - 動(dòng)態(tài)修改樣式表或 CSS 變量（適合全局主題）。
- 結(jié)合事件實(shí)現(xiàn)交互式效果。
最佳實(shí)踐中應(yīng)關(guān)注性能優(yōu)化與代碼可維護(hù)性。
以上就是JavaScript改變HTML樣式的主要方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript改變HTML樣式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在JavaScript中處理字符串是一項(xiàng)常見的任務(wù),而去除字符串中的指定子字符串則是其中的一個(gè)重要操作,這篇文章主要給大家介紹了關(guān)于JavaScript字符串中replace方法的相關(guān)資料,需要的朋友可以參考下2025-04-04
微信小程序uniapp實(shí)現(xiàn)左滑刪除效果(完整代碼)
這篇文章通過(guò)實(shí)例代碼給大家講解了微信小程序uniapp實(shí)現(xiàn)左滑刪除效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
javascript canvas實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘例子
這篇文章主要為大家詳細(xì)介紹了javascript canvas實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘例子，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
微信小程序中this.data與this.setData的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于微信小程序中this.data與this.setData區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧2018-09-09
微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序轉(zhuǎn)發(fā)事件實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了javascript修改表格背景色實(shí)例，代碼簡(jiǎn)單，大家參考使用吧2013-12-12
javascript實(shí)現(xiàn)簡(jiǎn)單放大鏡效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的，但由于外部腳本的特殊性例如通過(guò)腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁(yè)面輸出HTML等。2011-04-04
淺談DOM的操作以及性能優(yōu)化問(wèn)題-重繪重排
下面小編就為大家?guī)?lái)一篇淺談DOM的操作以及性能優(yōu)化問(wèn)題-重繪重排。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
微信小程序開發(fā)搜索功能實(shí)現(xiàn)(前端+后端+數(shù)據(jù)庫(kù))
這篇文章主要介紹了微信小程序開發(fā)搜索功能實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03