一、使用style属性-直接设置单个 CSS 属性
// 获取元素
var element = document.getElementById("myElement");
// 设置样式
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";
二、使用cssText属性-一次性设置多个 CSS 属性
// 获取元素
var element = document.getElementById("myElement");
// 设置样式
element.style.cssText = "color: red; background-color: blue; font-size: 20px;";
三、使用setAttribute方法-通过设置 style 属性来添加样式
// 获取元素
var element = document.getElementById("myElement");
// 设置样式
element.setAttribute("style", "color: red; background-color: blue; font-size: 20px;");
四、使用setProperty方法-设置 CSS 属性，并可以选择设置优先级（如 important）
style.setProperty(propertyName, value, priority);
propertyName: 要设置的 CSS 属性名称（例如 'color' 或 'background-color'）。value: 属性的值（例如 'red' 或 '16px'）。priority（可选）: 优先级标志，通常是 'important'。如果不指定，默认为空字符串，表示没有优先级。
// 获取元素
var element = document.getElementById("myElement");
// 设置样式
element.setProperty("color", "red","important");
五、使用 className 或 classList-添加一个预定义的 CSS 类
// 获取元素
var element = document.getElementById("myElement");
// 使用className添加
element.className = 'myClass';
// 添加CSS类
element.classList.add("myClass");
// 移除CSS类
element.classList.remove("myClass");
.myClass {
color: red;
background-color: blue;
font-size: 20px;
}
六、使用 createElement 和 appendChild-动态创建一个 <style> 元素并添加 CSS 类
const style = document.createElement('style');
style.textContent = `
.myClass {
color: red;
font-size: 20px;
}
`;
document.head.appendChild(style);
七、使用 insertAdjacentHTML-使用 insertAdjacentHTML 方法插入 CSS
element.insertAdjacentHTML(position, text);
position: 插入内容的位置，可以是以下四个字符串之一：
'beforebegin': 在目标元素之前插入。'afterbegin': 在目标元素的第一个子节点之前插入。'beforeend': 在目标元素的最后一个子节点之后插入。'afterend': 在目标元素之后插入。
text: 要插入的 HTML 字符串。
document.head.insertAdjacentHTML('beforeend', `
<style>
.myClass {
color: red;
font-size: 20px;
}
</style>
`);
八、使用 innerHTML-动态创建一个 <style> 元素并通过 innerHTML 设置 CSS
const style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = `
.myClass {
color: red;
font-size: 20px;
}
`;
九、使用CSSStyleSheet -动态创建一个 <style> 元素并通过 CSSStyleSheet 插入 CSS 规则
stylesheet.addRule(selector, style, index);
selector: CSS 选择器（例如 '.my-class'）。style: CSS 样式声明字符串（例如 'color: red; font-size: 20px;'）。index（可选）: 规则在样式表中的位置。如果不指定，默认添加到最后。
stylesheet.insertRule(rule, index);
rule: 包含选择器和样式声明的完整 CSS 规则字符串（例如 '.my-class { color: red; font-size: 20px; }'）。index（可选）: 规则在样式表中的位置。如果不指定，默认添加到最后。
// 创建一个新的样式表
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 查询计算后的样式-查询计算后的样式
// 获取元素
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); // 输出:red
console.log(computedStyle.backgroundColor); // 输出: blue
console.log(computedStyle.fontSize); // 输出: 20px
综合应用
<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插入CSS
document.head.insertAdjacentHTML('beforeend', `
<style>
.anotherClass {
color: purple;
font-size: 18px;
}
</style>
`);
// 使用innerHTML插入CSS
const 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); // 输出:24px
console.log(computedStyle.margin); // 输出:5px (important)
});
</script>
<style></style>
