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

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag.

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

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

In the body

在身体里

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

I'm looking for straight javascript without the use of libraries.

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

I tried the following, but keep receiving blanks:

我尝试了以下方法，但继续收到空白：

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

I noticed that I'm only able to use the above if I have set the style using javascript, but unable to with the style tags.

我注意到，如果我使用javascript设置样式，但我无法使用上述样式，但无法使用样式标记。

4 个解决方案

#1

The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.

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

Is not so easy to do it in a cross-browser way, IE has its own way, through the element.currentStyle property, and the DOM Level 2 standard way, implemented by other browsers is through the document.defaultView.getComputedStyle method.

也不是那么容易做，在一个跨浏览器的方式，IE浏览器有自己的方式，通过element.currentStyle属性和DOM 2级标准的方式，通过其他浏览器中实现是通过document.defaultView.getComputedStyle方法。

The two ways have differences, for example, the IE element.currentStyle property expect that you access the CCS property names composed of two or more words in camelCase (e.g. maxHeight, fontSize, backgroundColor, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height, font-size, background-color, etc).

这两种方式有所不同，例如，IE element.currentStyle属性期望您访问由camelCase中的两个或多个单词组成的CCS属性名称（例如maxHeight，fontSize，backgroundColor等），标准方式需要使用用短划线分隔的单词（例如max-height，font-size，background-color等）。

Also, the IE element.currentStyle will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.

此外，IE element.currentStyle将返回指定单位的所有大小（例如12pt，50％，5em），标准方法将始终以像素为单位计算实际大小。

I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:

我之前提出了一个跨浏览器的功能，它允许您以跨浏览器的方式获取计算出的样式：

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;
  }
}

The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.

对于某些情况，上述函数并不完美，例如对于颜色，标准方法将返回rgb（...）表示法中的颜色，在IE上，它们将在定义时返回它们。

I'm currently working on an article in the subject, you can follow the changes I make to this function here.

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

#2

In jQuery, you can do alert($("#theid").css("width")).

在jQuery中，你可以做警报（$（“＃theid”）。css（“width”））。

-- if you haven't taken a look at jQuery, I highly recommend it; it makes many simple javascript tasks effortless.

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

Update

for the record, this post is 5 years old. The web has developed, moved on, etc. There are ways to do this with Plain Old Javascript, which is better.

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

#3

I believe you are now able to use Window.getComputedStyle()

我相信你现在能够使用Window.getComputedStyle（）

Documentation MDN

文档MDN

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

Example to get width of an element:

获取元素宽度的示例：

window.getComputedStyle(document.querySelector('#mainbar')).width

#4

By using .css() in jquery the style tag can be accessed and modified

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

for example:

例如：

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