如何用JavaScript访问CSS生成的内容

在前端开发中，我们通常会使用 CSS 来控制页面的样式。而有时候我们需要通过 JavaScript 来获取或者修改 CSS 生成的内容，这时候就需要用到一些技巧。

获取 CSS 生成的样式

有时候我们需要获取元素经过 CSS 计算后得出的样式，例如盒模型的大小、位置等信息。这时候我们可以使用 window.getComputedStyle() 方法来获取计算后的 CSS 样式对象。

const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
console.log(styles.width); // 输出计算后的宽度
console.log(styles.left); // 输出计算后的左边距

修改 CSS 生成的样式

除了获取，我们也可以通过 JavaScript 修改 CSS 生成的样式。我们可以通过改变元素的 style 属性来修改样式，在修改样式之前需要注意以下几点：

• 需要使用驼峰式命名法。
• 单位需要与原样式保持一致。
• 修改样式后需要设置元素的样式属性，否则修改不会生效。

const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';
element.style.marginTop = '10px';

获取指定样式值

如果我们只是需要获取某个具体样式的值，可以使用 getPropertyValue() 方法来获取。

const element = document.getElementById('myElement');
const styles = window.getComputedStyle(element);
console.log(styles.getPropertyValue('height'));

操作 CSS 类

CSS 类可以方便地控制样式的变化。我们可以使用 JavaScript 来操作元素的类，从而改变元素的样式。

<div id="myElement" class="box"></div>

.box {
  width: 100px;
  height: 100px;
}

.active {
  background-color: red;
}

const element = document.getElementById('myElement');
element.classList.add('active'); // 添加类名
element.classList.remove('active'); // 移除类名
element.classList.toggle('active'); // 切换类名

以上就是如何用 JavaScript 访问 CSS 生成的内容的一些技巧和示例代码。在实际开发过程中，我们可能会遇到更复杂的情况，需要灵活运用这些技巧来解决问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14715