javascript - JavaScript で計算されたプロパティを取得する

Question

JavaScript を使用して要素の計算されたプロパティを取得するにはどうすればよいですか。それは可能ですか？liChrome がや などの要素の計算されたプロパティを表示しているのを見てきaました。JavaScriptを使用して同じことができると思っただけです。私が試したときはいつでも、未定義と表示されています。

Answer 1

あなたは使用することができoffsetWidthますoffsetHeight：

var width = document.getElementById('elementId').offsetWidth;

詳細: https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

これも参照してください: http://www.quirksmode.org/dom/getstyles.html

編集：

検討することもできwindow.getComputedStyle(element)ます。offsetX を使用したサブピクセル レンダリングに関連する問題があります。

詳細はこちら: http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/

Answer 2

jQuery を使用している場合は、.css() 経由で css props にアクセスできます。

http://api.jquery.com/css/

.css() メソッドは、最初に一致した要素からスタイル プロパティを取得する便利な方法です。特に、ブラウザーがこれらのプロパティのほとんどにアクセスする方法が異なることを考えると (標準ベースのブラウザーでは getComputedStyle() メソッドと currentStyle および runtimeStyle を使用) Internet Explorer のプロパティ) と、ブラウザーが特定のプロパティに使用するさまざまな用語。

Answer 3

jQuery を強くお勧めします。

利用方法：

html:

<img src="img_src.png" id="img1" />

jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    alert('width: ' + $('#img1').width());
    alert('height: ' + $('#img1').height());
    alert('left offset: ' + $('#img1').offset().left);
    alert('top offset: ' + $('#img1').offset().top);
});
</script>

また

純粋なJavaScript：

<script type="text/javascript">
window.onload = function() {
    var img = document.getElementById('img1');
    alert('width: ' + img.width);
    alert('height: ' + img.height);
}
</script>

それが役立つことを願っています