86

私はこの要素を持っています:

<div style="width: 100%; height: 10px;"></div>

幅をピクセル単位で取得したい。私はちょうどこれを試しました：

document.getElementById('banner-contenedor').style.width

を返します100%。JavaScriptで実際に要素の幅をピクセル単位で取得することは可能ですか?

4

7 に答える 7

113 
document.getElementById('banner-contenedor').clientWidth
于 2012-08-13T03:30:32.400 に答える
16

計算された幅を取得します。試す：.offsetWidth

（つまり：this.offsetWidth='50px'またはvar w=this.offsetWidth）

SOに関するこの回答もお気に召すかもしれません。

于 2012-08-13T03:30:47.563 に答える
8

バニラJSで尋ねられたことを行う回答は1つもありません。バニラの回答が必要なので、自分で作成しました。

clientWidth にはパディングが含まれ、offsetWidth には他のすべてが含まれます ( jsfiddle リンク)。あなたが望むのは、計算されたスタイルを取得することです（jsfiddle link）。

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

編集:getComputedStyle非標準であり、ピクセル以外の単位で値を返すことができます。一部のブラウザーは、要素にスクロールバーがある場合、スクロールバーを考慮した値を返します (CSS で設定された幅とは異なる値を返します)。要素にスクロールバーがある場合、からマージンとパディングを削除して幅を手動で計算する必要がありますoffsetWidth。

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}

そうは言っても、これはおそらく私の現在の経験に従うことをお勧めする答えではなく、JavaScriptにあまり依存しない方法を使用することに頼ります.

于 2015-03-16T20:00:32.750 に答える
1

jQueryを試してください：

$("#banner-contenedor").width();
于 2012-08-13T03:30:21.870 に答える
-1

このjQueryは私のために働いた：

$("#banner-contenedor").css('width');

これにより、計算された幅が得られます

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

于 2015-08-11T08:11:51.307 に答える