JavaScript DOM元素样式管理指南
1. 通过类名字符串操作样式
在HTML中，元素的CSS类名通过class属性以字符串形式定义。JavaScript提供了两种主要方式来读取和修改这个字符串，从而间接控制元素的样式。
使用 className 属性
每个DOM元素都包含一个className属性，它对应于HTML中的class属性。通过这个属性，我们可以直接获取或设置元素的完整类名字符串。
<body>
<div id="container">
<div id="myElement" class="base-style alignment-center">示例内容</div>
</div>
</body>
const myElement = document.querySelector("#myElement");
// 读取当前元素的类名
console.log(myElement.className); // 输出: "base-style alignment-center"
// 设置新的类名字符串，这将覆盖所有现有类
myElement.className = "base-style alignment-center active-state";
console.log(myElement.className); // 输出: "base-style alignment-center active-state"
使用 getAttribute() 和 setAttribute() 方法
DOM元素的getAttribute()和setAttribute()方法可以直接操作元素的HTML属性，包括class属性。
const myElement = document.querySelector("#myElement");
// 读取元素的'class'属性值
console.log(myElement.getAttribute("class")); // 输出: "base-style alignment-center active-state"
// 设置元素的'class'属性值
myElement.setAttribute("class", "base-style alignment-left highlight");
console.log(myElement.getAttribute("class")); // 输出: "base-style alignment-left highlight"
局限性： 这两种方法都将类名视为一个单一的字符串进行操作。当需要添加、删除或切换单个类而不影响其他类时，手动解析和拼接字符串会变得繁琐且容易出错。
2. 使用 classList 属性高效管理类名
classList 属性是HTML5引入的一个新特性，它提供了一种更方便、更安全的方式来操作元素的CSS类名。它返回一个DOMTokenList接口，该接口包含一系列用于增删改查类名的方法。
<body>
<div id="targetDiv" class="default-class text-dark">这里是一些文本</div>
</body>
const targetDiv = document.querySelector("#targetDiv");
// classList 返回一个 DOMTokenList 对象
console.log(targetDiv.classList); // 例如: DOMTokenList(2) ['default-class', 'text-dark', value: 'default-class text-dark']
classList.add(...classNames) - 添加类名
向元素添加一个或多个类名。如果类名已存在，则不会重复添加。
const targetDiv = document.querySelector("#targetDiv");
targetDiv.classList.add('is-active', 'bordered');
// 现在 targetDiv 的类名可能是 "default-class text-dark is-active bordered"
console.log(targetDiv.classList.value);
classList.remove(...classNames) - 移除类名
从元素中移除一个或多个类名。
const targetDiv = document.querySelector("#targetDiv");
targetDiv.classList.remove('text-dark');
// 现在 targetDiv 的类名可能是 "default-class is-active bordered" (如果上面代码已执行)
console.log(targetDiv.classList.value);
classList.toggle(className, [force]) - 切换类名
如果指定的类名存在，则将其移除；如果不存在，则将其添加。可选的force参数可以强制添加（true）或移除（false）类名。
const targetDiv = document.querySelector("#targetDiv");
// 如果 'is-active' 存在则移除，不存在则添加
targetDiv.classList.toggle('is-active');
console.log("Toggle 1:", targetDiv.classList.value); // 假设是第一次，则添加
// 再次切换，如果 'is-active' 存在则移除
targetDiv.classList.toggle('is-active');
console.log("Toggle 2:", targetDiv.classList.value); // 移除
// 强制添加 'is-hidden'
targetDiv.classList.toggle('is-hidden', true);
console.log("Forced add:", targetDiv.classList.value);
// 强制移除 'is-hidden'
targetDiv.classList.toggle('is-hidden', false);
console.log("Forced remove:", targetDiv.classList.value);
classList.contains(className) - 检查类名是否存在
判断元素是否包含指定的类名，返回一个布尔值。
const targetDiv = document.querySelector("#targetDiv");
console.log(targetDiv.classList.contains("default-class")); // true
console.log(targetDiv.classList.contains("non-existent-class")); // false
classList.replace(oldClassName, newClassName) - 替换类名
用一个新类名替换现有的旧类名。
const targetDiv = document.querySelector("#targetDiv");
targetDiv.classList.replace("default-class", "primary-style");
console.log(targetDiv.classList.value); // 替换 'default-class' 为 'primary-style'
3. 直接操作元素的内联样式
除了通过CSS类名来管理样式，JavaScript还可以直接修改元素的内联样式。这通过DOM元素的style属性实现。style属性是一个CSSStyleDeclaration对象，它包含了元素所有可读写的内联样式属性。
<body>
<div id="styledElement" style="color: blue; font-size: 16px;">这个元素有内联样式</div>
</body>
const styledElement = document.querySelector("#styledElement");
// 设置单个内联样式属性
styledElement.style.color = "purple";
styledElement.style.fontWeight = "bold";
// 获取内联样式属性值
console.log(styledElement.style.color); // 输出: "purple"
处理带连字符的CSS属性
在CSS中，一些属性名包含连字符（例如background-color、font-family）。在JavaScript的style对象中，需要将这些属性名转换为驼峰式命名（CamelCase）。
background-color变为backgroundColorfont-size变为fontSizemargin-left变为marginLeft
const styledElement = document.querySelector("#styledElement");
// 使用驼峰命名法设置背景色
styledElement.style.backgroundColor = "lightgray";
// 使用驼峰命名法设置边框半径
styledElement.style.borderRadius = "8px";
// 也可以使用数组语法（通常不推荐，但对于动态属性名或特殊情况可能有用）
styledElement.style["border-top"] = "2px solid red";
console.log(styledElement.style.cssText); // 查看所有内联样式字符串
