如何根据一组动态图像设置div宽度？

我有一组15张水平堆叠的图像。根据视口大小，它们的大小完全是动态的。如何根据一组动态图像设置div宽度？

为了将页面延伸至100％，我使用了一个DIV，它需要定期将宽度更新为15张图像的宽度+固定量。

我对JavaScript相当陌生，但我环顾四周，能够将一个简单的脚本拼凑起来并制作一个测试页面。

更新，这里的测试页面的完整代码，我不能去上班：

<!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> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<script type="text/javascript"> 
window.onresize = function(event) { 
var img = document.getElementById('1'); 
var w1 = parseInt(img.clientWidth); 
var img = document.getElementById('2'); 
var w2 = parseInt(img.clientWidth); 

d.style.width= w1 + w2 + 400; 
} 
</script> 
<style type="text/css"> 
    html,body{ 
    margin:0; 
    padding:0; 
    border:none; 
    overflow-y:hidden; 
} 
.gal{ 
    vertical-align:middle;  
} 
</style> 
</head> 

<body style="color: #1b1b1d"> 
<div style="position:absolute; width:18500px; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1;background-color:#1b1b1d"> 
<img id="1" class="gal" height="100%" src="image1.jpg" />&nbsp; 
<img id="2" class="gal" height="100%" style="max-height:652px;max-width:1024px" src="image1.jpg" />&nbsp; 
</div> 
</body> 

</html>

它无法使用和不使用+“PX”的工作无论是在脚本的末尾。

无论出于何种原因，它根本不工作。任何人都可以帮助指导我吗？我对此很陌生。如果有帮助，我有jquery与另一个副本和粘贴脚本安装。

来源

2012-04-23 Chris M

“W1 + W2 + 400” 等于 “W1 + W2 + 400”，而不是W1 + W2 + 400 – 2012-04-23 10:53:58

@ Mr.Disappointment，你的昵称非常适合于:-) – TMS 2012-04-23 11:06:31

您的评论从什么时候开始can [ids]（http://www.w3.org/TR/html401/types.html#type-name）是否包含'＃'字符？请写出正确的HTML。 – Raynos 2012-04-23 11:09:59

试试这个：

var img = document.getElementById('#1'); 
var w1 = img.clientWidth; 
var img = document.getElementById('#2'); 
var w2 = img.clientWidth; 

d.style.width = (w1 + w2 + 400) + "px";

来源

2012-04-23 10:55:36

试试这个：

var img = document.getElementById('1'); 
var w1 = parseInt(img.clientWidth); 
var img = document.getElementById('2'); 
var w2 = parseInt(img.clientWidth); 

d.style.width= (w1 + w2 + 400) + "px";

来源

2012-04-23 10:55:52 gabitzish

我想在脚本中的最后一行：

d.style.width="w1 + w2 + 400";

需要不加引号，即：

d.style.width= w1 + w2 + 400;

关于动态更新宽度 - 您真的需要将此脚本附加到浏览器的resize事件来处理它。即：

window.onresize = function(event) { 
    //your code here 
}

来源

2012-04-23 11:02:06 aaronrhodes

如何根据一组动态图像设置div宽度？

回答

相关问题