Transformer contenu CSS pour rendu DOM JS

rgb44 Messages postés 65 Statut Membre -
rgb44 Messages postés 65 Statut Membre - 28 févr. 2014 à 03:53

Bonsoir,

J'aimerai modifier un style CSS avec un script DOM Javascript, mais débutant avec ce dernier j'ai un peu de mal...

Il s'agit d'accéder au contenu img ci-dessous (html) :

<div id="more_pics">
    <a id="exit_more_pics"</a>
    <h2></h2>
    <div>
        <a class="prev browse left disabled" style=""></a>
        <div class="scrollable" style="width: 800px;">
            <div class="items">
                <a class="cboxElement" title="Photo 1">
                    <img id="pic76209"></img></a>
...

Sur ma feuille CSS j'y ai accès de cettes façon :

.scrollable img {
    border: 1px solid #000000 !important;

Mais avec mon javascript je n'y arrive que comme ça, avec, forcément le désavantage de le voir s'appliquer qu'à une image :

document.getElementById("more_pics").children[2].children[1].children[0].children[0].style.border="1px solid #000";

Je n'arrive pas à utiliser .getElementsByTagName('img') ni .cssText

Merci beaucoup pour votre aide, j'imagine que ce n'est pas si difficile mais je n'ai pas réussi à trouver ailleurs...

Afficher la suite

5 réponses

Réponse 1 / 5
Utilisateur anonyme

salut, si tu dois en changer une centaine tu leurs mets un attribut name ou une class.

Je suis désolé j'arrive pas a comprendre ce qui bloque
1
1. rgb44 Messages postés 65 Statut Membre 1
  
  Lorsque j'essaye d'utiliser une classe :
  document.getElementsByClassName('items').style.border="1px solid #000000";
  
  J'obtiens l'erreur suivante :
  TypeError: document.getElementsByClassName(...).style is undefined
  
  0
2. Utilisateur anonyme
  
  salut il faut faire une boucle
  
  toujours le même lien :
  
  http://pour-ccm.zz.mu/index3.html
  
  0
3. rgb44 Messages postés 65 Statut Membre 1
  
  Merci beaucoup pour la boucle !
  Malheureusement le style ne s'applique qu'au parent de l'img (toujours en sa basant sur mon squelette en post #1) :
  
  var img = document.getElementsByClassName("cboxElement");
  for (var i = 0; i < img.length; i++) {
  img[i].style.border= "1px solid #000";
  }
  
  J'ai essayer d'ajouter .children[0]; mais j'obtiens la même erreur
  
  0
Réponse 2 / 5
Utilisateur anonyme

salut, essaye getElementById()
0
1. rgb44 Messages postés 65 Statut Membre 1
  
  Merci, mais ça ne marche pas ni pour les classes, ni pour "img"
  
  0
2. Utilisateur anonyme
  
  laisse moi 10 minutes
  
  0
Réponse 3 / 5
Utilisateur anonyme

salut, voila en fait je me suis heurté au même problème que toi. Le problème viens !important. En effet, si tu met important tu peux plus modifier les border.

Voici un exemple -> clique sur la photo

http://pour-ccm.zz.mu/index3.html
0
1. rgb44 Messages postés 65 Statut Membre 1
  
  Mais de quelle façon intégrer mon "1px solid #000", c'est surtout là que je n'y arrive pas :S
  
  0
Réponse 4 / 5
Utilisateur anonyme

salut, tu souhaite juste remplacer ton css par du javascript ?
0
1. rgb44 Messages postés 65 Statut Membre 1
  
  Oui, de la même façon que je le ferai en écrivant dans la console :)
  
  0
2. Utilisateur anonyme
  
  <script> document.getElementById("pic76209").style.border = "1px solid #000"; </script>
  
  0
3. Utilisateur anonyme
  
  pourquoi faire ?
  
  0
4. rgb44 Messages postés 65 Statut Membre 1
  
  Merci mais avec ce script je ne peux changer que l'image pic76209, il y a une centaines d'autres et qui sont susceptibles de changer
  Mon CSS (utiliser dans Stylish) y arrivait très bien avec
  .scrollable img {
  propriété : ...
  }
  :/
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

Utilisateur anonyme

salut, oui car ta class est un lien. Tu pourrais mettre une class a tes images se serait plus simple. Si tu souhaite rester avec cette maniere.

<body>
		<div id="more_pics">
			<a id="exit_more_pics"</a>
			<h2>truc</h2>
			<div>
			<a class="prev browse left disabled" style=""></a>
			<div class="scrollable" style="width: 800px;">
			<div class="items">
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>
			<a class="cboxElement" title="Photo 1"> <img class="pic76209" src="image1.jpg"></img></a>

		</div>
		</div>
		</div></div>
		<script>
			var img = document.getElementsByClassName("cboxElement");
			for (var i = 0; i < img.length; i++) {
				img[i].lastChild.style.border = "2px solid red";
			}

		</script>
	</body>

rgb44 Messages postés 65 Statut Membre 1

Je n'ai pas réussi à changer les classe

Merci :'/
0

Transformer contenu CSS pour rendu DOM JS

5 réponses

Discussions similaires

Newsletters