原生JavaScript实现读写CSS样式的方法详解

CSS样式可以通过JavaScript动态地进行修改和设置，而这些操作也被称作DOM样式操作。在本文中，我将详细讲解原生JavaScript实现读写CSS样式的方法。

1. 通过style属性读写CSS属性

通过元素的style属性可以获取或修改该元素的行内样式。行内样式是直接写在HTML标签中的样式，优先级最高。

读取行内样式

使用element.style.property即可获取对应属性的值。例如，获取一个div元素的宽度和高度：

const divElement = document.querySelector('div');
const width = divElement.style.width;
const height = divElement.style.height;

修改行内样式

通过element.style.property可以修改行内样式的值。例如，修改上面div元素的宽度和高度：

divElement.style.width = '100px';
divElement.style.height = '50px';

同时，也可以使用style.cssText来一次性修改多个属性：

divElement.style.cssText = 'width: 100px; height: 50px; background-color: #f00;';

2. 通过getComputedStyle方法读取计算后的样式

通过window.getComputedStyle()方法可以获取到计算后的样式，计算后的样式是从浏览器解析样式表后计算出来的，具有最高的优先级。

读取计算后的样式

使用window.getComputedStyle(element, [pseudo])即可获取计算后的属性值。其中，element是要获取属性值的元素节点，pseudo是可选参数，表示要获取的伪元素的属性值。

例如，获取一个div元素的背景颜色和字体大小：

const divElement = document.querySelector('div');
const bgColor = window.getComputedStyle(divElement).backgroundColor;
const fontSize = window.getComputedStyle(divElement).fontSize;

修改计算后的样式

通过getComputedStyle方法只能获取计算后的样式值，无法直接修改计算后的样式。如果需要修改计算后的样式，需要通过其他方式改变元素的样式属性，才能改变计算后的样式。

示例说明

示例1

<!DOCTYPE html>
<html>
<head>
  <title>示例1</title>
</head>
<body>
  <div id="box" style="width: 100px; height: 100px; background-color: #f00;"></div>
  <button onclick="changeColor()">改变颜色</button>
  <script>
    const boxElement = document.querySelector('#box');
    const colorList = ['#f00', '#0f0', '#00f'];
    function changeColor() {
      const currentColor = window.getComputedStyle(boxElement).backgroundColor;
      let index = colorList.indexOf(currentColor);
      index++;
      if (index >= colorList.length) {
        index = 0;
      }
      boxElement.style.backgroundColor = colorList[index];
    }
  </script>
</body>
</html>

在这个例子中，我们在页面中添加了一个div元素和一个按钮。点击按钮时，该元素的背景颜色可以循环变为红色、绿色、蓝色。该例子中同时使用了行内样式和计算后的样式获取和修改元素的样式。

示例2

<!DOCTYPE html>
<html>
<head>
  <title>示例2</title>
  <style>
    #box{
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    #box:hover {
      background-color: #0f0;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button onclick="changeColor()">改变颜色</button>
  <script>
    const boxElement = document.querySelector('#box');
    function changeColor() {
      boxElement.style.backgroundColor = '#00f';
    }
  </script>
</body>
</html>

在这个例子中，我们使用了CSS样式表中的:hover伪类为元素添加了一个圆形的边框。当鼠标悬停时，元素的背景颜色将变为绿色，并带有圆形边框。当点击按钮时，元素的背景颜色将直接变为蓝色，而圆形边框则不再出现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生javascript实现读写CSS样式的方法详解 - Python技术站

原生javascript实现读写CSS样式的方法详解