javascript - HTML DOM アラート style.width

Question

重複の可能性:
要素の幅を px で取得する

divA の幅を調べるにはどうすればよいですか? このコードは、空のアラートポップアップを表示します。

<script type="text/javascript">

function DisplayResult(){
    width = document.getElementById("divA").style.width;
    alert(width);
}
var widthFinder = {   
    find: DisplayResult
};
widthFinder.find();

</script>

<div id="divA">Alert this string's length in pixels</div>

編集：

これにより、「null」がアラートされるようになりました。まだ私が望んでいるものではありません。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

function DisplayResult(){
var width = $("#divA").width();
alert(width);
}
var widthFinder = {   
find: DisplayResult
};
widthFinder.find();

</script>

<div id="divA" style="display:inline; width:100%;">Alert this string's length in pixels</div>

</body>
</html>

score 2 · Accepted Answer

あなたのコードは、DOM の準備が整う前に実行されるように設定されているため、要素が見つからず、null値が返されます。

function DisplayResult(){ //declared function in the document's head, ok
    var width = $("#divA").width();
    alert(width);
}

$(document).ready(function(){ //function calls here, when the DOM is ready
    var widthFinder = {   
    find: DisplayResult()
    };
    widthFinder.find();
});

関数呼び出しをイベント内にラップして$(document).ready()、DOM の準備が整う前にコードが実行されないようにしました。また、関数呼び出しとして解釈されるようにを追加()しました。DisplayResult()

このJSFiddle の例を試してください。

score 2 · Accepted Answer

あなたはいつでもjQueryを使うことができます

alert($("#divA").width());

または、この方法を試して、歌姫の幅を変数に保存しておくこともできます

var width = $("#divA").width());
alert(width);

score 1 · Accepted Answer

jQuery を使用すると、必要なことを簡単に実行できます。これには 2 つの方法があります。

1つは、すでに答えたように、あなたができることです

alert($("#divA").width());

これは、幅を単一の数値として返します。幅が 600px の場合、600 が返されます。

次に、.cssプロパティを使用して幅を取得できます

alert($("#divA").css("width"));

これにより、css ファイルで指定されたとおりの幅が返されます。幅が 600 ピクセルの場合、600 ではなく 600 ピクセルが返されます。

score 1 · Accepted Answer

Jquery 以外のバージョンの場合。発生後に関数呼び出しを遅らせてみてくださいonload。例えば：

window.onload = function(){
    DisplayResult();
}

javascript - HTML DOM アラート style.width

4 に答える 4

Related

Reference