changer dynamiquement la largeur d'une div

J'essaye de changer dynamiquement la largeur de ma div interne en cliquant sur le fait que les images sont changées (ce qui marche) avec un script similaire. Je ne peux pas faire fonctionner le script, aucune aide pour le réparer ou le modifier serait apprécié. Je suis un noob en javascript donc s'il vous plaît être gentil ;-)changer dynamiquement la largeur d'une div

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

Source

2010-01-31 MRAISKY

Ne pas le faire à la dure. Débarrassez-vous de la largeur fixe du div inner (qui est la cause de tous ces problèmes JavaScript inutiles) et juste le résoudre avec l'aide d'un bon coup de CSS. Plus encore, la division interne est techniquement superflue. Voici un SSCCE, juste copy'n'paste'n'run il:

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

Source

2010-01-31 16:56:08 BalusC

substitut

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

avec

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

et lui donner un essai

Source

2010-01-31 16:14:02 Eineki

... Nope ne fonctionnait pas – MRAISKY

Cette fonction ne fonctionne pas regarde à droite:

Si vous essayez de définir la largeur des images, puis ceci:

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

devrait ressembler à ceci:

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

Sinon, si vous essayez de définir la largeur de la div lui-même, il devrait ressembler à ceci:

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

Source

2010-01-31 16:25:37

Depuis « intérieur » est déjà un div, il n'y a pas besoin d'appeler getElementsByTagName. Donc, essayez ceci:

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

(Depuis le « style » est un mot-clé, j'ai utilisé un autre nom de la variable)

Source

2010-01-31 16:33:50 Ray

changer dynamiquement la largeur d'une div

Répondre

Questions connexes