我尝试获取DOM对象的宽度:
function resizeArea(){
var width = 0;
area.children().each(function(i){
alert(this.offsetWidth);
width += this.offsetWidth;
});
area.css('width', width);
}
获得结果:
但如果在firebug,dragonfly和其他调试器中看到它,我看到正确的908px。 我不知道哪里有问题。我在domloaded之后运行这个乐趣。
以下是块的HTML和css:
<div class="scroll_area" id="scroll">
<div class="area" id="area">
<div class="category">
[..]
</div>
</div>
</div>
<style>
#scroll {
position:realtive; width: 800px, heght: 400px;
}
#area {
position:absolute; left: 0; top: 0;
}
#area .category, #area .category .text, #area .category .image{
width: 200px
}
</style>
那很有意思。此功能以后只能在第一次运行时正确工作,才能进行首次计算。
答案 0 :(得分:0)
我设法让这个工作(使用jQuery): 如果我误解了这个问题,请告诉我
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#scroll {
position:realtive; width: 800px, heght: 400px;
}
#area {
position:absolute; left: 0; top: 0;
}
#area div.category {
width: 200px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" language="Javascript"></script>
<script type="text/javascript">
function resizeArea(){
var width = 0;
jQuery("#area").children().each(function(i){
alert(this.offsetWidth);
width += this.offsetWidth;
});
jQuery("#area").css('width', width);
}
</script>
</head>
<body>
<div class="scroll_area" id="scroll">
<div class="area" id="area">
<div class="category">
[..]FIRST ALERT
</div>
<div class="category">
[..]SECOND ALERT
</div>
</div>
</div>
<script type="text/javascript">resizeArea();</script>
<br /><br /><br /><a href="javascript:void(0);" onClick="resizeArea()">Fun Function Again</a>
</body>
</html>