JS動(dòng)態(tài)添加style樣式常用方法(附詳細(xì)代碼)
更新時(shí)間：2025年12月19日 10:27:21 作者：藤原とラふ店丶
在JavaScript中,動(dòng)態(tài)設(shè)置樣式style是一種常見(jiàn)的操作,它允許開(kāi)發(fā)者在運(yùn)行時(shí)改變?cè)氐耐庥^,這篇文章主要介紹了JS動(dòng)態(tài)添加style樣式常用方法的相關(guān)資料,需要的朋友可以參考下
前言
在 JavaScript 中動(dòng)態(tài)添加樣式，核心是操作 DOM 元素的內(nèi)聯(lián)樣式 或 動(dòng)態(tài)創(chuàng)建/修改樣式表（<style> 標(biāo)簽），適用于單個(gè)元素樣式調(diào)整、全局樣式批量生效等場(chǎng)景。以下是常用方法，含詳細(xì)示例和注意事項(xiàng)，同時(shí)適配 Vue3 setup 語(yǔ)法場(chǎng)景：
一、核心方法分類（按使用場(chǎng)景）
方法 1：操作單個(gè)元素的內(nèi)聯(lián)樣式（優(yōu)先級(jí)最高，僅作用于當(dāng)前元素）
通過(guò) element.style 直接設(shè)置樣式，支持單個(gè)屬性賦值、批量設(shè)置，適合精準(zhǔn)控制單個(gè)元素。
1.1 直接設(shè)置單個(gè)樣式（駝峰命名）
style 對(duì)象的屬性需用 駝峰命名（如 backgroundColor 對(duì)應(yīng) CSS 的 background-color），優(yōu)先級(jí)高于外部樣式表。
// 獲取目標(biāo)元素（DOM 原生獲取或 Vue3 ref 引用）
const targetEl = document.getElementById('box');
// 或 Vue3 setup 中用 ref：const targetEl = ref(null); 需在 onMounted 中訪問(wèn) targetEl.value
// 單個(gè)樣式賦值
targetEl.style.width = '300px';
targetEl.style.height = '200px';
targetEl.style.backgroundColor = '#f0f0f0';
targetEl.style.border = '1px solid #ddd';
targetEl.style.fontSize = '16px';
1.2 批量設(shè)置樣式（用Object.assign）
適合一次性設(shè)置多個(gè)樣式，代碼更簡(jiǎn)潔：
const targetEl = document.querySelector('.content');
Object.assign(targetEl.style, {
width: '500px',
margin: '20px auto',
padding: '15px',
color: '#333',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)' // CSS3 樣式同樣支持
});
1.3 移除單個(gè)樣式
通過(guò) style.removeProperty('屬性名') 或賦值為空字符串：
// 方式 1：removeProperty（需用 CSS 原生命名，如 background-color）
targetEl.style.removeProperty('background-color');
// 方式 2：賦值為空字符串（更簡(jiǎn)潔）
targetEl.style.border = '';
方法 2：動(dòng)態(tài)創(chuàng)建<style>標(biāo)簽（全局樣式，作用于所有匹配元素）
通過(guò)創(chuàng)建 <style> 標(biāo)簽并插入到 <head> 中，適合批量生效的全局樣式（如主題切換、批量組件樣式調(diào)整），支持 CSS 選擇器、媒體查詢等。
2.1 基礎(chǔ)示例：添加全局樣式
// 1. 創(chuàng)建 style 標(biāo)簽
const styleEl = document.createElement('style');
styleEl.type = 'text/css'; // 可選，現(xiàn)代瀏覽器默認(rèn)支持
// 2. 編寫(xiě) CSS 內(nèi)容（支持所有 CSS 語(yǔ)法）
const cssContent = `
.dynamic-class {
color: #1E9FFF;
font-weight: 600;
transition: all 0.3s ease;
}
.dynamic-class:hover {
color: #009688;
transform: translateY(-2px);
}
/* 支持媒體查詢 */
@media (max-width: 768px) {
.dynamic-class {
font-size: 14px;
}
}
`;
// 3. 將 CSS 內(nèi)容插入 style 標(biāo)簽
styleEl.textContent = cssContent;
// 4. 插入到 <head> 中（生效）
document.head.appendChild(styleEl);
// （可選）保存 style 標(biāo)簽引用，后續(xù)可刪除
window.dynamicStyle = styleEl;
2.2 移除動(dòng)態(tài)創(chuàng)建的全局樣式
// 從 head 中移除 style 標(biāo)簽，樣式立即失效 document.head.removeChild(window.dynamicStyle);
2.3 動(dòng)態(tài)修改已有全局樣式
通過(guò)修改 <style> 標(biāo)簽的 textContent 實(shí)現(xiàn)：
// 基于上面創(chuàng)建的 styleEl，修改 CSS 內(nèi)容
styleEl.textContent = `
.dynamic-class {
color: #ff5722; /* 修改顏色 */
font-size: 18px;
}
`;
方法 3：修改已有樣式表的規(guī)則（精確控制現(xiàn)有樣式表）
如果頁(yè)面已存在 <style> 標(biāo)簽或外部樣式表，可通過(guò) document.styleSheets 訪問(wèn)并修改其樣式規(guī)則，適合微調(diào)現(xiàn)有樣式。
示例：修改現(xiàn)有樣式表的規(guī)則
// 1. 獲取頁(yè)面第一個(gè)樣式表（可通過(guò) index 或 href 篩選）
const styleSheet = document.styleSheets[0];
// 2. 新增樣式規(guī)則（參數(shù)：選擇器、樣式內(nèi)容、插入位置）
// 語(yǔ)法：insertRule(rule, index)
styleSheet.insertRule(`
.box {
background: #f5f5f5;
padding: 20px;
}
`, styleSheet.cssRules.length); // 插入到樣式表最后
// 3. 修改已有規(guī)則（假設(shè)第 0 條規(guī)則是 .box）
const targetRule = styleSheet.cssRules[0];
targetRule.style.backgroundColor = '#eee'; // 直接修改屬性
targetRule.style.padding = '25px';
// 4. 刪除規(guī)則
styleSheet.deleteRule(0); // 刪除第 0 條規(guī)則
二、Vue3setup語(yǔ)法中的特殊用法
在 Vue3 setup 中，需結(jié)合 ref（獲取 DOM 元素）、onMounted（確保 DOM 渲染完成）等組合式 API 使用，避免操作未渲染的 DOM。
示例 1：Vue3 中給單個(gè)元素動(dòng)態(tài)加內(nèi)聯(lián)樣式
<template>
<div ref="boxRef" class="box">Vue3 動(dòng)態(tài)樣式示例</div>
<button @click="addDynamicStyle">添加樣式</button>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 1. 引用 DOM 元素
const boxRef = ref(null);
// 2. 確保 DOM 掛載后再操作（onMounted 中）
onMounted(() => {
// 初始樣式（可選）
if (boxRef.value) {
boxRef.value.style.opacity = '0.8';
}
});
// 3. 點(diǎn)擊按鈕動(dòng)態(tài)添加樣式
const addDynamicStyle = () => {
const box = boxRef.value;
if (!box) return;
Object.assign(box.style, {
width: '400px',
height: '200px',
backgroundColor: '#1E9FFF',
color: '#fff',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
});
};
</script>
示例 2：Vue3 中動(dòng)態(tài)創(chuàng)建全局樣式（如主題切換）
<template>
<button @click="switchTheme('light')">淺色主題</button>
<button @click="switchTheme('dark')">深色主題</button>
<div class="theme-container">主題測(cè)試內(nèi)容</div>
</template>
<script setup>
import { onUnmounted } from 'vue';
// 存儲(chǔ)全局樣式標(biāo)簽引用，用于卸載時(shí)清理
let themeStyleEl = null;
// 切換主題（動(dòng)態(tài)創(chuàng)建全局樣式）
const switchTheme = (theme) => {
// 先移除舊主題樣式（避免沖突）
if (themeStyleEl) {
document.head.removeChild(themeStyleEl);
}
// 創(chuàng)建新樣式標(biāo)簽
themeStyleEl = document.createElement('style');
const themeCss = theme === 'dark'
? `
.theme-container {
background: #121212;
color: #fff;
border: 1px solid #333;
}
body { background: #000; }
`
: `
.theme-container {
background: #fff;
color: #333;
border: 1px solid #eee;
}
body { background: #f9f9f9; }
`;
themeStyleEl.textContent = themeCss;
document.head.appendChild(themeStyleEl);
};
// 組件卸載時(shí)清理樣式（避免內(nèi)存泄漏）
onUnmounted(() => {
if (themeStyleEl) {
document.head.removeChild(themeStyleEl);
}
});
</script>
三、關(guān)鍵注意事項(xiàng)
- 樣式優(yōu)先級(jí)：內(nèi)聯(lián)樣式（
element.style）> 動(dòng)態(tài)<style>標(biāo)簽 > 外部樣式表（按加載順序），需注意沖突問(wèn)題； - 命名規(guī)范：
element.style中 CSS 屬性需用 駝峰命名（如fontSize而非font-size），直接寫(xiě) CSS 原生命名需用字符串（如style['font-size'] = '16px'）； - !important 用法：內(nèi)聯(lián)樣式無(wú)法直接寫(xiě)
!important，需用setProperty方法：targetEl.style.setProperty('color', 'red', 'important'); - 內(nèi)存泄漏：動(dòng)態(tài)創(chuàng)建的
<style>標(biāo)簽或事件綁定，需在組件卸載/不需要時(shí)手動(dòng)移除（如 Vue3onUnmounted中清理）； - 兼容性：現(xiàn)代瀏覽器均支持上述方法，若需兼容 IE 需注意：
styleSheet.cssRules在 IE 中是styleSheet.rules，可通過(guò)判斷兼容：const cssRules = styleSheet.cssRules || styleSheet.rules;
四、常見(jiàn)場(chǎng)景總結(jié)
| 場(chǎng)景 | 推薦方法 |
|---|---|
| 單個(gè)元素樣式調(diào)整 | element.style 或 Object.assign |
| 全局樣式批量生效 | 動(dòng)態(tài)創(chuàng)建 <style> 標(biāo)簽 |
| 修改現(xiàn)有樣式表規(guī)則 | document.styleSheets 操作規(guī)則 |
| Vue3 組件內(nèi)樣式調(diào)整 | ref 獲取元素 + 內(nèi)聯(lián)樣式 |
| 主題切換/全局樣式切換 | 動(dòng)態(tài)創(chuàng)建 <style> 標(biāo)簽（配合卸載清理） |
總結(jié)
到此這篇關(guān)于JS動(dòng)態(tài)添加style樣式常用方法的文章就介紹到這了,更多相關(guān)JS動(dòng)態(tài)添加style樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了webpack多入口文件頁(yè)面打包配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
關(guān)于B/S判斷瀏覽器斷開(kāi)的問(wèn)題討論
前臺(tái)頁(yè)面五分鐘，自己刷新一次，所以最多只有五分鐘的差錯(cuò)。2008-10-10
使用JavaScript實(shí)現(xiàn)等比縮放的幾種常見(jiàn)方法
這篇文章主要介紹了如何使用JavaScript對(duì)HTML中的元素和任意DOM元素進(jìn)行等比縮放,通過(guò)獲取容器或元素的尺寸信息,計(jì)算縮放比例,并應(yīng)用CSS變換（transform屬性）來(lái)實(shí)現(xiàn)等比縮放,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Actionscript與javascript交互實(shí)例程序(修改)
這篇文章主要介紹了Actionscript與javascript交互實(shí)例程序(修改)的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
使用threejs實(shí)現(xiàn)滾動(dòng)效果的示例代碼
某一天我在刷抖音時(shí),看到一個(gè)UI設(shè)計(jì)師分享了一個(gè)好看的網(wǎng)頁(yè)滾動(dòng)動(dòng)效設(shè)計(jì),那種飄逸流暢的動(dòng)畫(huà)效果立刻抓住了我的眼球,我腦海里立刻開(kāi)始想象用代碼如何實(shí)現(xiàn)這個(gè)效果,所以本文給大家分享了如何使用threejs實(shí)現(xiàn)滾動(dòng)效果,感興趣的朋友可以參考下2024-01-01
Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了使用webpack和rollup打包組件庫(kù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
本文主要介紹了js字符串與Unicode編碼互相轉(zhuǎn)換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
這篇文章主要介紹了JavaScript 異常處理 詳解,需要的朋友可以參考下2015-02-02
JavaScript 編寫(xiě)匿名函數(shù)的幾種方法
匿名函數(shù)可以有效控制變量作用域，構(gòu)造閉包 (Closure)，防止對(duì)全局變量造成污染。在 JavaScript 中，編寫(xiě)匿名函數(shù)，有以下幾種方法.2010-02-02