動態更改div的寬度

我試圖通過類似的腳本來改變圖像的更改（其工作原理）時，動態更改我的「內部」div的寬度。我無法讓腳本工作，修復它的任何幫助，或改變它，將不勝感激。我在javascript中的小白所以請漂亮;-)動態更改div的寬度

<script type="text/javascript"> 
    function setBase(baseval) { 
    var images = document.getElementById("mylist").getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; 
    } 
    } 
</script> 
<script type="text/javascript"> 
    function setStyle(baseval) { 
    var style = document.getElementById("inner").getElementsByTagName("div"); 
    for (var i = 0; i < images.length; i++) { 
    style[i].style = baseval + "px"; 
    } 
    } 
</script> 
</head> 
<body> 


<div id="mylist" style=" height: 481px; width: 700px; overflow-x: auto; "> 
<div id="inner" style="width: 7300px "> 

     <img src="carousel_img/1/1.jpg" height="450" /> 
     <img src="carousel_img/1/2.jpg" height="450" /> 
     <img src="carousel_img/1/3.jpg" height="450" /> 
     <img src="carousel_img/1/4.jpg" height="450" /> 
     <img src="carousel_img/1/5.jpg" height="450" /> 
     <img src="carousel_img/1/6.jpg" height="450" /> 
     <img src="carousel_img/1/7.jpg" height="450" /> 
     <img src="carousel_img/1/8.jpg" height="450" /> 
     <img src="carousel_img/1/9.jpg" height="450" /> 
    <img src="carousel_img/1/10.jpg" height="450" /> 
     <img src="carousel_img/1/0.jpg" height="450" /> 
     <img src="carousel_img/1/11.jpg" height="450" /> 

</div> 
</div> 
<p> 
<a href="#" onclick="setBase('carousel_img/1/'); setStyle('7300'); return false;">Set A</a> 
<a href="#" onclick="setBase('carousel_img/3/'); setStyle('6300'); return false;">Set B</a> 
</p>

來源

2010-01-31 MRAISKY

不要做硬盤的方式。擺脫inner div（這是造成所有不必要的JavaScript問題的原因）的固定寬度，然後在CSS的好幫助下解決它。更重要的是，內部科技在技術上是多餘的。下面是一個SSCCE，只是copy'n'paste'n'run它：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2172338</title> 
     <style> 
      #carousel { 
       width: 150px; 
       height: 100px; 
       overflow-x: scroll; 
       overflow-y: hidden; 
       white-space: nowrap; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="carousel"> 
      <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> 
      <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> 
      <img src="http://sstatic.net/so/img/logo.png" width="250" height="61"> 
     </div> 
    </body> 
</html>

來源

2010-01-31 16:56:08 BalusC

替代

style[i].style = baseval + "px";

與

style[i].style.width = baseval + "px";

，並給它一個嘗試

來源

2010-01-31 16:14:02 Eineki

都能跟得上...... 沒有工作 – MRAISKY 2010-01-31 16:16:34

此功能不看正確：

如果你想設置圖像的寬度，那麼這樣的：

function setStyle(baseval) { 
    var style = document.getElementById("inner").getElementsByTagName("div"); 
    for (var i = 0; i < images.length; i++) { 
     style[i].style = baseval + "px"; 
    } 
}

應該是這樣的：

function setStyle(baseval) { 
    var images = document.getElementById("inner").getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
     images[i].style.width = baseval + "px"; 
    } 
}

否則，如果你想設置的div寬度本身，那麼它應該看起來像這樣：

function setStyle(baseval) { 
    var div = document.getElementById("inner"); 
    div.style.width = baseval + "px"; 
}

來源

2010-01-31 16:25:37

因爲「inner」已經是div，所以不需要調用getElementsByTagName。所以，試試這個：

var innerDiv = document.getElementById("inner"); 
innerDiv.style.width = baseval + "px";

（因爲「風格」是一個關鍵字，我用不同的變量名）

來源

2010-01-31 16:33:50 Ray

動態更改div的寬度

回答

相關問題