Transformer contenu CSS pour rendu DOM JS

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention - 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

A voir également:

Transformer contenu CSS pour rendu DOM JS
Word a trouvé du contenu illisible - Guide
Transformer une image en icone - Guide
Transformer majuscule en minuscule word - Guide
Fusionner deux cellules excel en gardant le contenu - Guide
Transformer epub en kindle - Guide

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

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 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

Utilisateur anonyme

salut il faut faire une boucle

toujours le même lien :

http://pour-ccm.zz.mu/index3.html

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 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

Réponse 2 / 5

Utilisateur anonyme

salut, essaye getElementById()

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 1

Merci, mais ça ne marche pas ni pour les classes, ni pour "img"

Utilisateur anonyme

laisse moi 10 minutes

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

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 1

Mais de quelle façon intégrer mon "1px solid #000", c'est surtout là que je n'y arrive pas :S

Réponse 4 / 5

Utilisateur anonyme

salut, tu souhaite juste remplacer ton css par du javascript ?

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 1

Oui, de la même façon que je le ferai en écrivant dans la console :)

Utilisateur anonyme

<script>
	document.getElementById("pic76209").style.border = "1px solid #000";

</script>

Utilisateur anonyme

pourquoi faire ?

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 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é : ...
}

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>

rgb44 Messages postés 61 Date d'inscription Statut Membre Dernière intervention 1

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

Merci :'/

Discussions similaires

Contenue masqué

ca veut dire quoi wmg sur youtube ?

Javascript Arrondi à 2 chiffres après la virgule

Avis site Crush dom tom / crushdomtom.com

Facebook - "Désolé, ce contenu n’est pas disponible..." et autre probl

Votre réponse

Discussions similaires