Sujet Précédent Sujet Suivant

Transformer contenu CSS pour rendu DOM JS

rgb44 Messages postés 65 Statut Membre -  
rgb44 Messages postés 65 Statut Membre -
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...

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
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
Utilisateur anonyme
 
salut il faut faire une boucle

toujours le même lien :

http://pour-ccm.zz.mu/index3.html
0
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
rgb44 Messages postés 65 Statut Membre 1
 
Merci, mais ça ne marche pas ni pour les classes, ni pour "img"
0
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
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
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
Utilisateur anonyme
  
<script>
	document.getElementById("pic76209").style.border = "1px solid #000";

</script>
0
Utilisateur anonyme
 
pourquoi faire ?
0
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
Réponse 5 / 5
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>

0
rgb44 Messages postés 65 Statut Membre 1
 
Je n'ai pas réussi à changer les classe

Merci :'/
0

Discussions similaires

Contenue masqué
Hippolyte -
Hippolyte -

6 réponses
Enlever le contenu masque
Julie17 -
Julie17 -

2 réponses
Avis site Crush dom tom / crushdomtom.com
Juanmarco33@ -
Afrikarnak -

11 réponses
ca veut dire quoi wmg sur youtube ?
parissf -
cacadoigt -

27 réponses
Problème d'accès à un site
DR6993 -
DR6993 -

4 réponses