一、使用style属性-直接设置单个 CSS 属性
javascript">// 获取元素
var element = document.getElementById("myElement");// 设置样式
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";
二、使用cssText属性-一次性设置多个 CSS 属性
javascript">// 获取元素
var element = document.getElementById("myElement");// 设置样式
element.style.cssText = "color: red; background-color: blue; font-size: 20px;";
三、使用setAttribute方法-通过设置 style 属性来添加样式
javascript">// 获取元素
var element = document.getElementById("myElement");// 设置样式
element.setAttribute("style", "color: red; background-color: blue; font-size: 20px;");
四、使用setProperty方法-设置 CSS 属性，并可以选择设置优先级（如 important）
javascript">style.setProperty(propertyName, value, priority);
propertyName: 要设置的 CSS 属性名称（例如 'color' 或 'background-color'）。value: 属性的值（例如 'red' 或 '16px'）。priority（可选）: 优先级标志，通常是 'important'。如果不指定，默认为空字符串，表示没有优先级。
javascript">// 获取元素
var element = document.getElementById("myElement");// 设置样式
element.setProperty("color", "red","important");
五、使用 className 或 classList-添加一个预定义的 CSS 类
javascript">// 获取元素
var element = document.getElementById("myElement");// 使用className添加
element.className = 'myClass';// 添加CSS类
element.classList.add("myClass");// 移除CSS类
element.classList.remove("myClass");
css">.myClass {color: red;background-color: blue;font-size: 20px;
}
六、使用 createElement 和 appendChild-动态创建一个 <style> 元素并添加 CSS 类
javascript">const style = document.createElement('style');
style.textContent = `.myClass {color: red;font-size: 20px;}
`;
document.head.appendChild(style);
七、使用 insertAdjacentHTML-使用 insertAdjacentHTML 方法插入 CSS
javascript">element.insertAdjacentHTML(position, text);
position: 插入内容的位置，可以是以下四个字符串之一： 'beforebegin': 在目标元素之前插入。'afterbegin': 在目标元素的第一个子节点之前插入。'beforeend': 在目标元素的最后一个子节点之后插入。'afterend': 在目标元素之后插入。
text: 要插入的 HTML 字符串。
javascript">document.head.insertAdjacentHTML('beforeend', `<style>.myClass {color: red;font-size: 20px;}</style>
`);
八、使用 innerHTML-动态创建一个 <style> 元素并通过 innerHTML 设置 CSS
javascript">const style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = `.myClass {color: red;font-size: 20px;}
`;
九、使用CSSStyleSheet -动态创建一个 <style> 元素并通过 CSSStyleSheet 插入 CSS 规则
javascript">stylesheet.addRule(selector, style, index);
selector: CSS 选择器（例如 '.my-class'）。style: CSS 样式声明字符串（例如 'color: red; font-size: 20px;'）。index（可选）: 规则在样式表中的位置。如果不指定，默认添加到最后。
javascript">stylesheet.insertRule(rule, index);
rule: 包含选择器和样式声明的完整 CSS 规则字符串（例如 '.my-class { color: red; font-size: 20px; }'）。index（可选）: 规则在样式表中的位置。如果不指定，默认添加到最后。
javascript">// 创建一个新的样式表
const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);// 获取样式表的 sheet 对象
const sheet = styleSheet.sheet;// 添加一条 CSS 规则
sheet.insertRule('.my-class { color: red; }', sheet.cssRules.length);
十、使用 window.getComputedStyle 查询计算后的样式-查询计算后的样式
javascript">// 获取元素
var element = document.getElementById("myElement");// 设置样式
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";// 查询计算后的样式const computedStyle = window.getComputedStyle(element);console.log(computedStyle.color); // 输出:redconsole.log(computedStyle.backgroundColor); // 输出: blueconsole.log(computedStyle.fontSize); // 输出: 20px
综合应用
javascript"><template><div id="myElement">myElement</div>
</template><script setup>
import { onMounted } from 'vue';onMounted(() => {// 获取元素var element = document.getElementById("myElement");// 使用style属性设置样式element.style.color = "red";element.style.backgroundColor = "blue";element.style.fontSize = "20px";// 使用cssText属性设置样式element.style.cssText += " border: 10px solid black;";// 使用setAttribute方法设置样式element.setAttribute("style", element.getAttribute("style") + " padding: 100px;");// 使用setProperty方法设置样式element.style.setProperty("margin", "50px", "important");// 使用className或classList添加CSS类element.classList.add("myClass");// 定义一个CSS类const style = document.createElement('style');style.textContent = `.myClass {color: green;background-color: yellow;font-size: 24px;}`;document.head.appendChild(style);// 使用insertAdjacentHTML插入CSSdocument.head.insertAdjacentHTML('beforeend', `<style>.anotherClass {color: purple;font-size: 18px;}</style>`);// 使用innerHTML插入CSSconst anotherStyle = document.createElement('style');document.head.appendChild(anotherStyle);anotherStyle.innerHTML = `.yetAnotherClass {color: orange;font-size: 22px;}`;// 使用CSSStyleSheet插入规则const styleSheet = document.createElement('style');document.head.appendChild(styleSheet);const sheet = styleSheet.sheet;sheet.insertRule('.dynamicClass { color: brown; font-size: 26px; }', sheet.cssRules.length);// 查询计算后的样式const computedStyle = window.getComputedStyle(element);console.log(computedStyle.color); // 输出:rgb(0, 128, 0) (green)console.log(computedStyle.backgroundColor); // 输出:rgb(255, 255, 0) (yellow)console.log(computedStyle.fontSize); // 输出:24pxconsole.log(computedStyle.margin); // 输出:5px (important)
});
</script><style></style>
