Question

可能重复：
Get element width in 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>

Answer 1

您可以随时使用jQuery

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

或者您可以尝试这种方式并将diva的宽度保存在变量

中

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

Answer 2

使用jQuery，您可以轻松完成所需的工作。有两种方法：

其中一个，已经回答过你可以做到了

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

这会将宽度作为单个数字返回。如果宽度为600px，则返回600.

其次，您可以使用.css属性获取宽度，如

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

这将返回与css文件中给出的宽度完全相同的宽度。如果宽度为600像素，那么它将返回600px而不仅仅是600。

Answer 3

对于非Jquery版本。在onload发生后尝试延迟函数调用。例如：

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

Answer 4

您的代码设置为在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示例。

HTML DOM警告style.width

4 个答案: