JavaScript DOM 2. 操作类名(className) 操作 CSS

在JavaScript中，DOM (Document Object Model) 是用于操作网页内容、结构以及样式的标准接口。当涉及到类名(className)的操作时，你可以通过以下几个步骤来与CSS关联：

1. **获取元素**: 首先，你需要找到HTML中的某个元素，这通常通过`document.getElementById()`、`.querySelector()` 或 `getElementsByTagName()`等方法完成。

var element = document.getElementById('myElement');

2. **修改类名**: 使用`classList`属性可以方便地添加、删除或切换类名。例如，添加类名：

   element.classList.add('newClass');

删除类名：

   element.classList.remove('oldClass');

切换类名（如果存在则移除，反之则添加）：

   element.classList.toggle('classToToggle');

3. **关联CSS样式**: 当一个元素拥有特定的类名时，对应的CSS规则会生效。你可以直接在CSS文件中定义这类样式的样式，比如背景颜色、字体大小等：

   .newClass {
     background-color: red;
     font-size: 16px;
   }