Question

<html>
<head>
    <title>Return Width</title>
    <style type="text/css">
        #foo { background: green; width: 80px; }
    </style>
    <script type="text/javascript">
        function getWidth() {
            alert(document.getElementById("foo").style.width);
        }
    </script>
</head>
<body>
<div id="foo" onClick="getWidth()">
    Hello World
</div>

我一直在尝试返回几个属性，包括width和backgroundColor，我发现的是我可以设置属性，但我无法返回它们。为什么呢？

Answer 1

仅适用于内联样式。通过非内联样式使用getComputedStyle来设置CSS。

function getWidth() {
    var elem = document.getElementById("foo");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("width");
    alert(theCSSprop);
}

<强> jsFiddle example

Answer 2

style属性引用直接应用于元素的样式（通过style属性或style属性）。它不引用通过级联应用的样式。

为此，您需要getComputedStyle。

Answer 3

取决于您需要访问的属性，您有其他方法，例如offsetwidth和offsetheight. getComputedStyles在ie7和ie8上不起作用，尽管您可以试试这个，是跨浏览器

function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}

为什么javascript不会返回样式属性？

3 个答案: