如何根據一組動態圖像設置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寬度？

回答

相關問題