js怎么获取css的值

JavaScript获取CSS值的方法主要有：使用window.getComputedStyle、element.style、以及通过currentStyle（仅适用于IE）。最推荐的方法是使用window.getComputedStyle，因为它可以获取所有计算后的样式值。

使用window.getComputedStyle方法获取CSS值：

let element = document.getElementById('myElement');
let style = window.getComputedStyle(element);
let value = style.getPropertyValue('color');  // 获取元素的颜色值

一、使用`window.getComputedStyle`获取CSS值

window.getComputedStyle方法是获取计算后样式的最通用和推荐的方法。它不仅能够获取元素的内联样式，还能够获取通过外部样式表或者嵌入样式表定义的样式。无论是现代浏览器还是较旧的版本都广泛支持这一方法。

1. 获取单个CSS属性值

使用window.getComputedStyle时，你可以通过元素和属性名来获取特定的CSS属性值。以下是一个具体的例子：

let element = document.querySelector('.example');
let computedStyle = window.getComputedStyle(element);
let backgroundColor = computedStyle.getPropertyValue('background-color');
console.log('Background Color:', backgroundColor);

在这个例子中，我们选择了一个具有类名example的元素，并获取其计算后的background-color属性值。

2. 获取多个CSS属性值

你可以通过循环或者直接调用多次getPropertyValue来获取多个属性值：

let element = document.querySelector('.example');
let computedStyle = window.getComputedStyle(element);
let styles = ['color', 'font-size', 'margin'];
styles.forEach((style) => {
  console.log(`${style}: ${computedStyle.getPropertyValue(style)}`);
});

二、使用`element.style`获取内联样式

element.style方法仅能获取元素的内联样式，而不能获取通过外部样式表或者嵌入样式表定义的样式。 这在某些情况下是一个限制，但有时也足够使用。

1. 获取单个内联样式

let element = document.getElementById('myElement');
element.style.color = 'red';  // 设置内联样式
let color = element.style.color;  // 获取内联样式
console.log('Color:', color);

2. 设置和获取多个内联样式

你可以通过直接设置和获取element.style属性来操作多个内联样式：

let element = document.getElementById('myElement');
element.style.cssText = 'color: blue; background-color: yellow;';
console.log('Color:', element.style.color);
console.log('Background Color:', element.style.backgroundColor);

三、使用`currentStyle`获取CSS值（仅适用于IE）

currentStyle是仅适用于IE浏览器的获取计算后样式的方法。现代浏览器不再支持这一方法，但对于一些老旧的项目，这仍然是一个有用的工具。

if (element.currentStyle) {
  let color = element.currentStyle['color'];
  console.log('Color (IE):', color);
}

四、跨浏览器兼容性处理

为了确保代码在所有浏览器中都能正常运行，通常会编写一个函数来处理不同的情况：

function getComputedStyleValue(element, property) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
  } else if (element.currentStyle) {
    return element.currentStyle[property];
  }
  return null;
}
let element = document.getElementById('myElement');
let color = getComputedStyleValue(element, 'color');
console.log('Color:', color);

五、综合示例

一个综合的示例展示了如何使用这些方法来获取各种CSS值：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get CSS Value</title>
  <style>
    .example {
      color: blue;
      font-size: 16px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="myElement" class="example" style="background-color: yellow;">Hello World</div>
  <script>
    let element = document.getElementById('myElement');
    // 使用window.getComputedStyle
    let computedStyle = window.getComputedStyle(element);
    console.log('Computed color:', computedStyle.getPropertyValue('color'));
    console.log('Computed font-size:', computedStyle.getPropertyValue('font-size'));
    // 使用element.style
    console.log('Inline background-color:', element.style.backgroundColor);
    // 跨浏览器兼容性处理
    function getComputedStyleValue(element, property) {
      if (window.getComputedStyle) {
        return window.getComputedStyle(element, null).getPropertyValue(property);
      } else if (element.currentStyle) {
        return element.currentStyle[property];
      }
      return null;
    }
    console.log('Compatible color:', getComputedStyleValue(element, 'color'));
  </script>
</body>
</html>

六、总结

获取CSS值是Web开发中的常见需求，最推荐的方法是使用window.getComputedStyle，因为它能够获取所有计算后的样式值。了解并掌握不同方法的使用场景和兼容性处理，将使你在实际开发中更加游刃有余。