Javascript 动态更改div的宽度_Javascript_Css_Html_Width

Javascript 动态更改div的宽度

javascript css html

Javascript 动态更改div的宽度,javascript,css,html,width,Javascript,Css,Html,Width,我试图在点击图像时动态地改变我的“内部”div的宽度（这可以使用类似的脚本）。我不能让脚本工作，任何帮助修复它，或改变它将不胜感激。我是javascript的noob，所以请友好点；-）函数setBase（baseval）{ var images=document.getElementById（“mylist”）.getElementsByTagName（“img”）；对于（var i=0；i

我试图在点击图像时动态地改变我的“内部”div的宽度（这可以使用类似的脚本）。我不能让脚本工作，任何帮助修复它，或改变它将不胜感激。我是javascript的noob，所以请友好点；-）


函数setBase（baseval）{
var images=document.getElementById（“mylist”）.getElementsByTagName（“img”）；
对于（var i=0；i
style[i].style = baseval + "px"; 

与
并尝试一下
此函数看起来不正确：
如果要设置图像的宽度，请执行以下操作：
function setStyle(baseval) {
    var style = document.getElementById("inner").getElementsByTagName("div");
    for (var i = 0; i < images.length; i++) {
        style[i].style = baseval + "px"; 
    }
}

由于“inner”已经是一个div，因此不需要调用getElementsByTagName。因此，请尝试以下操作：
var innerDiv = document.getElementById("inner");
innerDiv.style.width = baseval + "px"; 

（因为'style'是一个关键字，所以我使用了另一个变量名）
不要这么做。去掉内部的div的固定宽度（这是所有不必要的JavaScript问题的原因）而且，内部div在技术上是多余的。这里有一个，复制粘贴运行它：
<!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>


所以问题2172338
#旋转木马{
宽度：150px；
高度：100px；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
}

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

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

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

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