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