0 
<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>

widthandを含むいくつかのプロパティを返そうとしていbackgroundColorますが、プロパティを設定できるのに返せないことがわかりました。なんで？

4

3 に答える 3

3

これはインラインスタイルでのみ機能します。非インラインスタイルを介して設定されたCSSにgetComputedStyleを使用します。

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

jsFiddleの例

于 2013-02-16T14:49:53.967 に答える
2

プロパティは、（プロパティまたは属性styleを介して）要素に直接適用されたスタイルを参照します。カスケードを介して適用されるスタイルは参照しません。stylestyle

そのためには、あなたが欲しいですgetComputedStyle。

于 2013-02-16T14:49:04.657 に答える
1

アクセスする必要があるプロパティに応じて、 getComputedStyles は ie7offsetwidthとoffsetheight.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]
}
于 2013-02-16T14:57:43.903 に答える