HTML DOM alerting style.width

可能的重复项：
获取元素宽度（以 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>

编辑：

现在会发出"空"警报。仍然不是我所希望的。

<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>

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

你可以随时使用 jQuery

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

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

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

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

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

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

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

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

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

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

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

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

相关内容

最新更新

热门标签：