Transformer contenu CSS pour rendu DOM JS

Fermé

rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 - 27 févr. 2014 à 23:34
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 - 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...

A voir également:

Transformer contenu CSS pour rendu DOM JS
Word a trouvé du contenu illisible - Guide
[<B>contenu masqué</b>] ✓ - Forum Téléphones & tablettes Android
Transformer rj45 en wifi - Forum Réseaux sociaux
Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
Trait css ✓ - Forum CSS

5 réponses

Réponse 1 / 5

Utilisateur anonyme
28 févr. 2014 à 00:44

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 dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
Modifié par rgb44 le 28/02/2014 à 00:57

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
28 févr. 2014 à 01:05

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 dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
Modifié par rgb44 le 28/02/2014 à 02:04

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
27 févr. 2014 à 23:37

salut, essaye getElementById()

rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
27 févr. 2014 à 23:42

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

Utilisateur anonyme
27 févr. 2014 à 23:43

laisse moi 10 minutes

Réponse 3 / 5

Utilisateur anonyme
28 févr. 2014 à 00:01

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 dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
28 févr. 2014 à 00:07

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
28 févr. 2014 à 00:09

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

rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
28 févr. 2014 à 00:30

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

Utilisateur anonyme
28 févr. 2014 à 00:34

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

</script>

Utilisateur anonyme
28 févr. 2014 à 00:34

pourquoi faire ?

rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
Modifié par rgb44 le 28/02/2014 à 00:40

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
28 févr. 2014 à 02:40

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 dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015
28 févr. 2014 à 03:53

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

Merci :'/

Discussions similaires

Savoir de quel ville à été envoyé le message

Javascript Arrondi à 2 chiffres après la virgule

Youtube: Ce contenu n'est pasdisponible dans votre pays

transformer un cable telephone en RJ45

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters