更新

Question

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

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

在体内

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

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

我尝试了以下内容，但继续收到空白：

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

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

Answer 1

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

以跨浏览器的方式做到这一点并不容易，IE有自己的方式，通过element.currentStyle属性和DOM Level 2 标准方式，由其他人实现浏览器是通过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上它们将返回它们原样定义

我目前正在撰写该主题的一篇文章，您可以按照我对此函数here所做的更改。

Answer 2

我相信您现在可以使用Window.getComputedStyle（）

Documentation MDN

'sheet 21!E4:'sheet 2'!F12

获取元素宽度的示例：

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

Answer 3

在jQuery中，您可以alert($("#theid").css("width"))。

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

更新

记录，这篇文章是5岁。网络已经开发，移动等等。有一些方法可以使用Plain Old Javascript来做到这一点，这是更好的。

Answer 4

通过在jquery中使用.css（），可以访问和修改样式标记

例如：

var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );

Answer 5

您可以使函数getStyles接受一个元素，而其他参数是您想要的值的属性。

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");

OR

const styles = getStyles(document.body, ["height", "width"]);

Answer 6

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

示例：




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

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

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

6 个答案:

更新