我试图通过类似脚本在图像更改(有效)的单击上动态更改“内部”div的宽度。我无法让脚本工作,任何帮助修复它,或更改它将不胜感激。我是一个javascript的菜鸟所以请你好; - )
<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>
答案 0 :(得分:2)
此功能看起来不正确:
如果你想设置图像的宽度,那么:
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";
}
答案 1 :(得分:2)
不要这么做。摆脱inner
div的固定宽度(这是所有不必要的JavaScript问题的原因),并在CSS的良好镜头的帮助下解决它。更重要的是,内部div在技术上是多余的。这是一个SSCCE,只是复制'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>
答案 2 :(得分:1)
由于“inner”已经是div,因此无需调用getElementsByTagName。所以试试这个:
var innerDiv = document.getElementById("inner");
innerDiv.style.width = baseval + "px";
(由于'style'是关键字,我使用了不同的变量名称)
答案 3 :(得分:0)
替换
style[i].style = baseval + "px";
带
style[i].style.width = baseval + "px";
并尝试一下