使用 JavaScript 访问 CSS 属性

在前端开发中，我们常常需要使用 JavaScript 来操作网页的样式。在这个过程中，了解如何访问和改变 CSS 属性是非常重要的。

访问 CSS 属性

使用 style 属性

要访问一个元素的 CSS 属性，可以使用元素的 style 属性。例如，如果要访问一个元素的背景颜色属性，可以使用以下代码：

const element = document.querySelector('.element');
const backgroundColor = element.style.backgroundColor;

上面的代码中，我们首先使用 document.querySelector 方法获取了一个类名为 .element 的元素，然后使用 style 属性访问该元素的背景颜色属性，并将结果赋值给了 backgroundColor 变量。

需要注意的是，使用 style 属性只能访问元素的内联样式属性（即在 HTML 中使用 style 属性设置的样式），而不能访问通过类名或 ID 设置的样式。

使用 getComputedStyle()

如果要访问元素的计算样式（包括内联样式和通过其他方式设置的样式），可以使用 getComputedStyle() 方法。例如，如果要访问一个元素的宽度属性，可以使用以下代码：

const element = document.querySelector('.element');
const width = getComputedStyle(element).width;

上面的代码中，我们使用 getComputedStyle() 方法获取了一个类名为 .element 的元素的计算样式，然后使用 .width 属性访问该元素的宽度属性，并将结果赋值给了 width 变量。需要注意的是，getComputedStyle() 方法返回的是一个只读对象，不能对它进行修改。

修改 CSS 属性

直接修改 style 属性

要直接修改一个元素的样式，可以使用该元素的 style 属性。例如，如果要将一个元素的背景颜色改为红色，可以使用以下代码：

const element = document.querySelector('.element');
element.style.backgroundColor = 'red';

上面的代码中，我们使用 style 属性设置了一个类名为 .element 的元素的背景颜色属性为红色。

使用 setProperty()

如果要修改一个元素的计算样式（包括内联样式和通过其他方式设置的样式），可以使用该元素的 setProperty() 方法。例如，如果要将一个元素的宽度属性改为 50%，可以使用以下代码：

const element = document.querySelector('.element');
element.style.setProperty('width', '50%');

上面的代码中，我们使用 setProperty() 方法设置了一个类名为 .element 的元素的宽度属性为 50%。

需要注意的是，setProperty() 方法还可以接受第三个参数，在其中指定要设置的优先级。优先级使用字符串表示，可以是 "important"、"normal" 或空字符串（表示没有指定优先级，默认为 "normal"）。例如，如果要将一个元素的宽度属性设置为 50% 并将优先级设置为 "important"，可以使用以下代码：

const element = document.querySelector('.element');
element.style.setProperty('width', '50%', 'important');

上面的代码中，我们使用 setProperty() 方法设置了一个类名为 .element 的元素的宽度属性为 50%，并将优先级设置为 "important"。

总结

使用 JavaScript 访问和修改 CSS 属性是前端开发中的一项重要技能，可以帮助我们更灵活地控制网页的样式。要访问一个元素的 CSS 属性，可以使用该元素的 style 属性或 getComputedStyle() 方法。要修改一个元素的 CSS 属性，可以使用该元素的 style 属性或 setProperty() 方法。需要根据具体情况选择不同的方法以达到最佳效果。