动态改变div的宽度 [英] change width of a div dynamically
问题描述
我试图改变我的内部div的宽度动态的点击图像被改变（这是工作）与类似的脚本。我不能让脚本工作，任何帮助修复它，或改变它将不胜感激。我是javascript中的noob，所以请好好 - ）
I am trying to change my "inner" div's width dynamically on the click that the images are changed (which works) with a similar script. I cannot get the script to work, any help fixing it, or changing it would be appreciated. I am a noob in javascript so please be nice ;-)
<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>
推荐答案
移除 inner div的固定宽度（这是所有不必要的JavaScript问题的原因），只需使用好的拍摄的CSS。更多的是，内部的div在技术上是多余的。以下是 SSCCE ，只需将其粘贴即可：
Don't do it the hard way. Get rid of the fixed width of the inner div (which is the cause of all that unnecessary JavaScript problems) and just solve it with help of a good shot of CSS. Even more, the inner div is technically superfluous. Here's an SSCCE, just copy'n'paste'n'run it:
<!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>
这篇关于动态改变div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
