Sujet Précédent Sujet Suivant

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

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
1
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
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
0
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
0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
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
0
Réponse 2 / 5
Utilisateur anonyme
27 févr. 2014 à 23:37
salut, essaye getElementById()
0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
27 févr. 2014 à 23:42
Merci, mais ça ne marche pas ni pour les classes, ni pour "img"
0
Utilisateur anonyme
27 févr. 2014 à 23:43
laisse moi 10 minutes
0
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
0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
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
0
Réponse 4 / 5
Utilisateur anonyme
28 févr. 2014 à 00:09
salut, tu souhaite juste remplacer ton css par du javascript ?
0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
28 févr. 2014 à 00:30
Oui, de la même façon que je le ferai en écrivant dans la console :)
0
Utilisateur anonyme
28 févr. 2014 à 00:34 
<script>
	document.getElementById("pic76209").style.border = "1px solid #000";

</script>
0
Utilisateur anonyme
28 févr. 2014 à 00:34
pourquoi faire ?
0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
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é : ...
}
:/
0

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>

0
rgb44 Messages postés 61 Date d'inscription dimanche 28 juillet 2013 Statut Membre Dernière intervention 16 mars 2015 1
28 févr. 2014 à 03:53
Je n'ai pas réussi à changer les classe

Merci :'/
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

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

11 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
transformer un cable telephone en RJ45
jacot55 -
Olee -

19 réponses