如何在 JavaScript 中获取 HTML 元素的样式值？

问题描述 投票：0回答：5

我正在寻找一种方法，从具有通过样式标签设置的样式的元素中检索样式。

<style> 
#box {width: 100px;}
</style>

在体内

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

我正在寻找不使用库的直接 JavaScript。

我尝试了以下操作，但不断收到空白：

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

我注意到，如果我使用 javascript 设置了样式，则只能使用上面的内容，但无法使用样式标签。

javascript html css stylesheet
5个回答
116
投票

element.style
属性让您只知道在该元素中定义为inline的CSS属性（以编程方式，或在元素的样式属性中定义），您应该获得计算的样式。

跨浏览器的方式没那么容易做到，IE 有自己的方式，通过 

element.currentStyle
属性，而 DOM Level 2 standard 方式，其他浏览器实现是通过 
document.defaultView.getComputedStyle
方法。

这两种方式有区别，例如 IE 

element.currentStyle
属性希望您访问由两个或多个 camelCase 单词组成的 CCS 属性名称（例如 
maxHeight
、
fontSize
、
backgroundColor
、等），标准方法期望具有用破折号分隔的单词的属性（例如 
max-height
、
font-size
、
background-color
等）。

此外，IE 

element.currentStyle
将返回指定单位的所有尺寸（例如 12pt、50%、5em），标准方法将始终以像素为单位计算实际尺寸。

我前段时间做了一个跨浏览器功能，可以让你以跨浏览器的方式获取计算样式：

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

上述函数在某些情况下并不完美，例如对于颜色，标准方法将以 rgb(...) 表示法返回颜色，在 IE 上它们将按定义返回它们。

我目前正在撰写该主题的一篇文章，您可以在这里关注我对此功能所做的更改。

73
投票

我相信你现在可以使用 Window.getCompulatedStyle()

var style = window.getComputedStyle(element[, pseudoElt]);

获取元素宽度的示例：

window.getComputedStyle(document.querySelector('#mainbar')).width
12
投票

在 jQuery 中，你可以做 

alert($("#theid").css("width"))
。

-- 如果您还没有看过 jQuery，我强烈推荐它；它使许多简单的 javascript 任务变得毫不费力。

更新

郑重声明，这篇文章已经有 5 年历史了。 Web 已经发展、进步等等。有很多方法可以使用普通的旧 Javascript 来做到这一点，这是更好的。

2
投票

使用

getComputedStyle
功能，计算样式包含设置到元素的所有CSS属性。即使不为元素设置属性。您仍然会在计算样式中找到该属性。

示例：







<style>
#Body_element {
color: green;
}
</style>

<body id="Body_element">
<script>
     alert(getComputedStyle(Body_element).color)
</script>
</body>
1
投票

如果您想从同一元素获取多个样式规则，这是一个辅助函数。 您将所需的元素和样式作为参数传递给它，它将返回它们的值

<style>
#Body_element {
color: green;
}
</style>

<body id="Body_element">
<script>
     alert(getComputedStyle(Body_element).color)
</script>
</body>

现在，您可以像这样使用此功能：

const convertRestArgsIntoStylesArr = ([...args]) => {
    return args.slice(1);
}

const getStyles = function () {
    const args = [...arguments];
    const [element] = args;

    let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args);

    const styles = window.getComputedStyle(element);
    const stylesObj = stylesProps.reduce((acc, v) => {
        acc[v] = styles.getPropertyValue(v);
        return acc;
    }, {});

    return stylesObj;
};

或

const styles = getStyles(document.body, "height", "width");
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.