20

私のCSSルールは次のようになります：

#my-div{
    display: none;
    position: absolute;
    left: -160px;
    bottom: -150px;
}

次のように左プロパティの値を取得しようとしています:

  • document.getElementById('my-div').style.left
  • document.getElementById('my-div').offsetLeft

問題は、両方が返されることnullです。問題はどこだ？

4

4 に答える 4

32

問題は、someElement.style.leftインライン スタイルがある場合にのみ機能することです。スタイルシートを介してスタイルを適用するため、期待どおりに値を取得することはできません。

JavaScript を介して値を取得するには、他にもいくつかの方法があります。

window.getComputedStyle:

を使用して要素の計算されたスタイルを取得することは可能ですがwindow.getComputedStyle、問題はサポートが非常に限られていることです (IE9+)。それでも使用したい場合は、関数でラップして、各プロパティを取得しやすくすることができます。 

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div", "left");

実施例

jQuery (または他のライブラリ):

もう 1 つのオプションは、値を取得するためのクロスブラウザー ソリューションを提供する、 jQuery (または任意のもの)などの JavaScript ライブラリを使用することです。

jQuery では、.css()メソッドを使用して要素の CSS プロパティを読み取ることができます。

$(function () {
  var left = $("#my-div").css("left");
});

実例 </p>

于 2012-12-08T14:40:19.687 に答える
5

これを呼び出す必要があります

document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft

ドキュメントが読み込まれるときに、それを以前に呼び出すと、要素がまだ存在しないため null が返されます。そのため、jQuery を使用して、すべてのコンテンツがいつ読み込まれるかを判断できます。

$(function() {
    //put your code here
});
于 2012-12-08T14:37:38.277 に答える
2

問題は、CSS が JS とは別に読み込まれるため、style.leftプロパティが正確であることを保証する公式の方法がないことです。style.leftプロパティは、優先度の高い別のスタイル オーバーライドです。

関数を使用する必要がありgetComputedStyleます。

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

元：

var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
于 2012-12-08T14:37:45.753 に答える
0

ドキュメントの準備ができたら、関数を呼び出す必要があるかもしれません。

jQuery を使用すると、左の値をより速く見つけることができます。

 $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });
于 2012-12-08T14:38:42.087 に答える