динамически изменять ширину div - PullRequest
Новая
       11

динамически изменять ширину div

4 голосов
/ 31 января 2010

Я пытаюсь динамически изменять ширину моего «внутреннего» 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>

Ответы [ 4 ]

2 голосов
/ 31 января 2010

Не делай этого нелегко. Избавьтесь от фиксированной ширины от 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>
2 голосов
/ 31 января 2010

Эта функция не выглядит правильно:

Если вы пытаетесь установить ширину изображений, то это: 

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 голос
/ 31 января 2010

Поскольку "inner" уже является div, нет необходимости вызывать getElementsByTagName. Итак, попробуйте это: 

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

(так как 'стиль' - это ключевое слово, я использовал другое имя переменной)

0 голосов
/ 31 января 2010

заменитель 

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

с 

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

и попробуй

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...