动态更改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的宽度

回答

相关问题