获取dom元素的样式 style defaultView.getComputedStyle

最新推荐文章于 2022-10-19 13:54:17 发布

斯诺登Snowden

最新推荐文章于 2022-10-19 13:54:17 发布

阅读量562

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_33619285/article/details/80155625

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种获取网页中DOM元素实际CSS样式的有效方法。通常情况下，直接访问元素的style属性并不能得到所有样式信息，特别是当样式通过外部CSS文件定义时。文中提供了一个JavaScript函数，该函数使用`getComputedStyle`API来获取元素的所有计算后的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你想要获取某一dom元素的css样式时，直接想到的就是获取其style属性

document.getElementById('div').style

但是实际上并不如你所愿，style属性里的各个值大部分都是空的。因为往往样式都是通过css生成的。

Jquery里有.css('color')的方法，它其实就是通过原生的 getComputedStyle 来实现的。

以下是实现方式：

function getStyle(element, styleName) {
  if (!element || !styleName) return false;
  if (styleName === 'float') styleName = 'cssFloat';

  try {
    const computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

getComputedStyle的第一个参数是dom对象，第二个是伪类选择器。

如 window.getComputedStyle(element, "::after")