DOM 样式和类操作 ​

在 JavaScript 中，可以使用 DOM（文档对象模型）来操作元素的样式和类。以下是一些常用的方法和技巧：

样式操作 ​

• 修改元素的内联样式：使用 style 对象来访问和修改元素的样式属性。

  js

  element.style.backgroundColor = 'red'

  1
  

  这里的 backgroundColor 是你要修改的 CSS 样式属性的名称，例如 'color'、'font-size' 等，而 'red' 是相应的属性值。

• 获取元素的计算样式：使用 getComputedStyle 方法。

  js

  const computedStyle = window.getComputedStyle(element)
  const propertyValue = computedStyle.getPropertyValue('propertyName')

  1
  2
  

  这将返回元素的计算样式对象，你可以使用 getPropertyValue 方法来获取指定属性的值。

类操作 ​

• 添加类名：使用 classList 属性的 add 方法。

  js

  element.classList.add('className')

  1
  

• 移除类名：使用 classList 属性的 remove 方法。

  js

  element.classList.remove('className')

  1
  

• 切换类名：使用 classList 属性的 toggle 方法。

  js

  element.classList.toggle('className')

  1
  

  如果元素已经具有指定的类名，则移除它；如果元素没有指定的类名，则添加它。

• 检查是否包含类名：使用 classList 属性的 contains 方法。

  js

  const hasClass = element.classList.contains('className')

  1
  

  这将返回一个布尔值，指示元素是否具有指定的类名。

上述方法可以用于修改元素的样式和类，以实现动态的样式变化或元素状态的切换。你可以根据需要进行组合和应用，以满足具体的交互需求。

需要注意的是，类名的操作只会修改元素的类列表，而不会直接修改元素的 class 属性。如果需要直接修改 class 属性，可以使用 setAttribute 方法。

element.setAttribute('class', 'className')