jquery动态获取宽度作为浏览器宽度调整大小

我对jQuery不是非常有经验，所以希望得到以下帮助，目前我可以获得指定div的像素宽度，这很好，但我想进一步开发并能够列出一些div来获取附加代码的宽度。jquery动态获取宽度作为浏览器宽度调整大小

你会看到我有#divA，以及我想在同一个语句中获得#divB & #divC。例如（ⅰ试过，但它不是正确的）>

var txt=""; 
txt+="Width of div: " + $("#divA, #divB, #divC").width() + "</br>"; 
txt+="Height of div: " + $("#divA, #divB, #divC").height(); 
$("#divA, #divB, #divC").html(txt);

还可以在飞行中为视口/浏览器所输出的div宽度更新改变宽度 - 这可能吗？将保存页面刷新，这将很方便。

希望是有道理的。

<script> 
$(document).ready(function(){ 
$("button").click(function(){ 

var txt=""; 
txt+="Width of div: " + $("#divA").width() + "</br>"; 
txt+="Height of div: " + $("#divA").height(); 
$("#divA").html(txt); 


}); 
}); 
</script>

来源

2013-03-23 Bradz

？更改窗口大小的元素大小可以在没有Jquery/Javascript的情况下完成。这就是所谓的媒体查询，真的很喜欢（仅适用于现代浏览器）。 – 2013-03-23 10:39:21

我想在浏览器中直观地看到div的宽度是以像素为单位的 - div是以百分比形式设置的，因此它们调整到视口 – Bradz 2013-03-23 10:42:51

这是可能的。没有你的标记，我已经创建了自己的3个div（像你的）。当窗口调整大小时，它们的高度和宽度将记录到控制台。它们的宽度设置为％。我希望这有帮助。

让我知道这是你想要的。我不是100％确定你要求什么。

演示：

Working Demo

的Javascript：

$(window).resize(function() { 
    $(".divResized").each(function(i,item){ 
     item = $(item); 
     console.log(item.width(),item.height()) 
    }); 
});

HTML：

<div id="divA" class="divResized"> 
    test 
</div> 
<div id="divB" class="divResized"> 
    test1 
</div> 
<div id="divC" class="divResized"> 
    test2 
</div>

的CSS：

#divA{ 
    width:33%; 
} 

#divB{ 
    width:17%; 
} 

divC{ 
    width:50%; 
}

编辑： 如果你想让它写入到另一个div这里有一个小例子：你在使用的宽度和高度为Link

来源

2013-03-23 10:50:37

Xeano，这正是我在谢谢之后，很高兴看到另一个/更好的方式做这个 – Bradz 2013-03-23 11:12:35

谢谢:)如果你喜欢，请接受答案。 – 2013-03-23 11:13:05

嗨Xeano，即时只是试图调整这个，所以它显示结果在每个div而不是外部的一个，因为在你的第二个例子 - 无法得到第一个工作出于某种原因 – Bradz 2013-03-23 17:47:12

jquery动态获取宽度作为浏览器宽度调整大小

回答

相关问题