javascript - 动态改变div的宽度

标签 javascript css html width

我正在尝试通过使用类似的脚本更改图像(有效)来动态更改“内部”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>

最佳答案

不要以艰难的方式去做。摆脱 inner div 的fixed width(这是所有不必要的 JavaScript 问题的原因),并在 CSS 的帮助下解决它。更重要的是,内部 div 在技术上是多余的。这是一个 SSCCE ,只需复制'n'粘贴'然后'运行它:

<!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>

关于javascript - 动态改变div的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2172338/

相关文章:

css - 复选框不显示

php - 在显示数据库内容方面需要帮助

javascript - 如何组合两个init函数?

html - 为什么 z-index 不起作用?

html - Bootstrap 通知不起作用

javascript - 如何设置数据表?

javascript 在 1 秒后打印一个值

javascript - 什么规则管理内联 jslint 指令

html - 悬停时更改 Material UI TextField 的边框颜色

javascript - 如何在 Two.js 中创建深度