1

可能重复：
以像素为单位获取元素宽度

如何找到 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>
4

4 回答 4

2

你总是可以使用jQuery

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

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

var width = $("#divA").width());
alert(width);
于 2012-05-27T06:48:22.247 回答
2

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

于 2012-05-27T07:48:46.360 回答
1

使用 jQuery，你想要的可以很容易地完成并且有两种方法：

  • 一，正如已经回答的那样，你可以做

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

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

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

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

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

于 2012-05-27T07:43:58.363 回答
1

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

window.onload = function(){
    DisplayResult();
}
于 2012-05-27T07:46:26.787 回答