动态改变div的宽度

发布于 2024-08-19 22:48:14 字数 1839 浏览 3 评论 0原文

我正在尝试使用类似的脚本在单击图像更改（有效）时动态更改我的“内部”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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱影子 2024-08-26 22:48:14

不要采取困难的方式。摆脱 inner div 的固定宽度（这是所有不必要的 JavaScript 问题的原因），只需借助 CSS 的帮助即可解决它。更重要的是，内部 div 在技术上是多余的。这是一个 SSCCE，只需复制“粘贴”然后运行它：

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

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>

回复收藏 0 原文

π浅易 2024-08-26 22:48:14

这个函数看起来不正确：

如果你想设置图像的宽度，那么这个：

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"; 
}

This function doesn't look right:

If you're trying to set the width of the images, then this:

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

should look like this:

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

Otherwise, if you're trying to set the width of the div itself, then it should look like this:

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

回复收藏 0 原文

月野兔 2024-08-26 22:48:14

由于“inner”已经是一个div，因此无需调用getElementsByTagName。所以试试这个：（

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

由于“style”是一个关键字，我使用了不同的变量名）

Since "inner" is already a div, there is no need to call getElementsByTagName. So try this:

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

(Since 'style' is a keyword, I used a different variable name)

回复收藏 0 原文

缘字诀 2024-08-26 22:48:14

替换

style[i].style = baseval + "px";

并

 style[i].style.width = baseval + "px";

尝试一下

substitute

style[i].style = baseval + "px";

with

 style[i].style.width = baseval + "px";

and give it a try

回复收藏 0 原文

~没有更多了~

关于作者

久光

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

动态改变div的宽度

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

动态改变div的宽度

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。