Équivalent universel à getElementsByClassName()

Bonjour,

Cherchant à introduire des variables dans du CSS, la méthode du DOM document.getElementByClass semble appropriée.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function f_exposee() var largeur=window.innerWidth / 2+'px'; var hauteur=window.innerHeight / 2+'px'; function f_exposee(largeur, hauteur){ document.getElementByClass("c_exposee") .style.max-height='640px'; .style.max-width='480px'; .style.position='fixed'; .style.z-index='3'; .style.top=hauteur; .style.left=largeur; }

---

En revanche, je ne parviens pas à faire cohabiter plusieurs styles (erreur de syntaxe).
Par ailleurs, il semble que cela fonctionne mieux en remplacant les - par des ., lorsque nécessaire. Exemple : '.style.z.index' plutôt que '.style.z-index'.

La fonction est utilisée ici :

Code:

---

echo "<p data-tooltip='".substr($fichier, 0, -4)."'><img class='c_exposee' onclick='f_exposee()' src='../IMG/".$fichier."'>";

---

Merci :)

Peut être parce que getElementByClass n'existe pas ...

Merci SpaceFrog
Effectivement, du coup est-il possible de passer des variables Jscript dans une balise de type <style type="text/CSS"></style> ?

Je ne saisis pas bien le but de la manoeuvre ?
tu cherche à modifier le css ? le style d'une balise ? ...

Voici un extrait de la balise :

Code:

---

<style type='text/css'>img:active { left:largeur; top:hauteur } </style>

---

Avec largeur et hauteur récupérées via un script de ce type :

Code:

---

1 2	var largeur=window.innerWidth / 2+'px'; var hauteur=window.innerHeight / 2+'px';

---

Slt,

Peut être devrais tu regarder du coté de less (Fwk CSS). C'est le seul que je connaisse, il y en a surement d'autre...

++

Merci freddou17, je vais voir ça.

Code:

---

1 2 3 4 5 6

document.getElementByClass("c_exposee") .style.max-height='640px'; .style.max-width='480px'; .style.position='fixed'; .style.z-index='3'; .style.top=hauteur; .style.left=largeur;

---

Non, ce code n'est absolument pas valide, il est bourré d'erreurs de syntaxe. Tu n'as pas de validateur de syntaxe pour t'aider ?

Et LESS n'est pas un framework mais un préprocesseur CSS, il ne sera d'aucune utilité pour corriger un code faux à la base.

Citation:

---

Envoyé par Orang-

il semble que cela fonctionne mieux en remplacant les - par des .

---

:cry:

Un peitit tour par la :faq: : Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?

Pour info, - est en JavaScript (mais il semble que ce ne soit pas limité à JavaScript :whistle:) un opérateur de soustraction... donc quand tu écris

Code:

---

.style.max-height='640px';

---

tu indiques juste qu'il faut soustraire les valeurs HTMLElement.style.max et height et que le résultat de cette soustraction doit être la chaine '640px'. Ce qui n'a aucun sens.
Donc bien entendu, cela provoque une erreur.
Alors c'est sûr qu'en remplaçant les - par des ., tu vas éviter l'erreur, mais tu diras juste que la propriété heigth de la propriété max de l'objet style doit valoir la chaine demandée.
Ca, JavaScript sait le faire (ajouter des propriétés à des objets et leur fixer une valeur), mais ça n'a aucune utilité.

Enfin

Code:

---

document.getElementByClass("c_exposee")

---

certes, getElementByClass() n'existe pas, mais getElementByClassName() existe bel et bien. Cependant, les méthodes susceptibles de retourner plusieurs éléments (ce qui est le cas quand tu demandes les éléments ayant une certaine classe CSS) renvoient une collection et on ne traite pas une collection comme on traite un élément isolé.

Bref, je pense que le plus important pour toi est d'apprendre les bases de JavaScript avant de vouloir l'utiliser...

Citation:

---

Envoyé par Bovino

:cry:

---

Bonjour et Merci Bovino.
Je prends bonne note de tes remarques et t'en remercie grandement.

Citation:

---

Envoyé par Bovino

Bref, je pense que le plus important pour toi est d'apprendre les bases de JavaScript avant de vouloir l'utiliser...

---

Justement, ce sont là des exercices d'entrainement pour me familiariser avec le DOM.
Néanmoins, effectivement, je vais commencer par lire votre FAQ.

Bonjour,

Citation:

---

Envoyé par SylvainPV

Non, ce code n'est absolument pas valide, il est bourré d'erreurs de syntaxe. Tu n'as pas de validateur de syntaxe pour t'aider ? Et LESS n'est pas un framework mais un préprocesseur CSS, il ne sera d'aucune utilité pour corriger un code faux à la base.

---

J'utilise la Console MSIE 11.

Je suis désolé de rouvrir ce fil au sujet de ce script :

Code:

---

1 2 3 4 5 6 7 8

function fExposee (){ document.getElementById('ombre').style.display='block'; document.getElementById('box').style.display='block'; } function fRangee (){ document.getElementById('ombre').style.display='none'; document.getElementById('box').style.display='none'; }

---

En vérité, il semble qu'un getElementsByClassName() soit absoluement nécessaire ici :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?php $nbrif_img=0; $nbrpreg_img=0; $handle=@opendir("../IMG"); //echo $handle."<br/>"; while ($fichier = @readdir($handle)){ $extension=substr($fichier,-3); if (isset($fichier) && $extension == "GIF" ) { echo "<p data-tooltip='".substr($fichier, 0, -4)."'><img onclick='fExposee()' src='../IMG/".$fichier."'>"; echo "<div id='box'><div class='iExposee'><img onclick='fRangee()' src='../IMG/".$fichier."'></div></div>"; $nbrif_img++; } //if(preg_match('/gif/i', $extension)) //{ //$nbrpreg_img++; //} }   echo "</div>"; //echo $nbrpreg_img."\n" ; ?>

---

En effet, comme on peut le voir ci-dessus l'id box est amenée à être répétée plusieurs fois sur la page, en fonction des données présentent en $fichier.
Or en CSS, il est je crois préférable de n'avoir qu'un id de généré. Ici, seule la première donnée de $fichier est générée lorsque l'on clique sur l'image.
Il existe la solution getElementsByClassName, mais je ne suis pas parvenu à l'adapté au test évoqué ci-dessus. Par ailleurs, cette méthode semble trop récente pour pouvoir être utilisée sans risque v-à-v des compatibilités.

Bonjour,

Citation:

---

En effet, comme on peut le voir ci-dessus l'id box est amenée à être répétée plusieurs fois sur la page

---

une ID DOIT ETRE UNIQUE.

Il existe de nombreux polyfills pour émuler getElementsByClassName(), ne seraient-ce que les librairies usuelles type jQuery.

Citation:

---

Envoyé par NoSmoking

Bonjour,
une ID DOIT ETRE UNIQUE.

---

Merci.

Citation:

---

Envoyé par Bovino

Il existe de nombreux polyfills pour émuler getElementsByClassName(), ne seraient-ce que les librairies usuelles type jQuery.

---

Effectivement, il existe la solution getElementsByClassName, mais je ne suis pas parvenu à l'adapter au test évoqué ci-dessus :

Code:

---

1 2 3 4 5

function fExposee (){ document.getElementsByClassName('box').style.display='block'; Impossible de définir la propriété « display » d’une référence null ou non définie document.getElementsByClassName('ombre').style.display='block'; }

---

Citation:

---

Envoyé par Bovino

Cependant, les méthodes susceptibles de retourner plusieurs éléments (ce qui est le cas quand tu demandes les éléments ayant une certaine classe CSS) renvoient une collection et on ne traite pas une collection comme on traite un élément isolé.

---

C'est pas vraiment comme si je t'avais déjà indiqué pourquoi... :whistle:

Citation:

---

Envoyé par Bovino

C'est pas vraiment comme si je t'avais déjà indiqué pourquoi... :whistle:

---

Entendu, désolé, je n'avais pas fais le rapprochement.

Il ne reste que cette solution du coup :

Code:

---

1 2 3 4 5 6 7 8

<?php echo "<style type='text/CSS'> #box".$nbrif_img."{ display: none; position:fixed; top: 20%; left: 20%; width: 60%; height: 60%; padding: 0; margin:auto; border: 1px solid black; z-index:11; overflow: none;}</style>". "<script type='text/javascript'>function fExposee".$nbrif_img." () { document.getElementById('box".$nbrif_img."').style.display='block'; document.getElementById('ombre').style.display='block'; }</script>". "<script type='text/javascript'>function fRangee".$nbrif_img." (){document.getElementById('box".$nbrif_img."').style.display='none';document.getElementById('ombre').style.display='none';}</script>". "<p data-tooltip='".substr($fichier, 0, -4)."'><img onclick='fExposee".$nbrif_img."()' src='../IMG/".$fichier."'>". "<div id='box'><div class='iExposee'><img onclick='fRangee".$nbrif_img."()' src='../IMG/".$fichier++."'></div></div>"; ?>

---

Quoi ? 8O
Juste pour éviter de faire une boucle en JavaScript ? :?

Il faut vraiment vouloir se faire du mal pour mettre le CSS, le JS, le HTML et le PHP en inline dans un seul et même fichier. Surtout à coup de echo à chaque ligne :aie:

Enfin, déclarer autant d'ID et de fonctions qu'il y a d’éléments dans la liste est loin d'être la seule solution. En fait, je dirais que c'est la pire possible.

Une piste :

Code:

---

1 2 3 4 5 6 7 8

function fExposee (selector){ document.querySelector(selector+'-box').style.display='block'; document.querySelector(selector+'-ombre').style.display='block'; }   <img onclick='fExposee(".image1")' ... <div class=".image1-box" .... <div class=".image1-ombre" .....

---

Merci grandement pour votre patience.

Bovino
Avec l'équivalent côté php, mais sans rien trouver de bien pertinent.

SylvainPV
Merci, suivant vos conseils, j'avais tenté d'explorer cette piste, mais là non plus rien de concluant:
toujours cette même erreur :

Code:

---

1 2 3 4

function fExposee (){ document.querySelector('box').style.display='block'; // "Impossible d’obtenir la propriété « style » d’une référence null ou non définie" document.querySelector('ombre').style.display='block';

---

Sinon, qu'il est nécessaire d'utiliser jquery.min.js pour réaliser ce que je cherche à faire.

Citation:

---

document.querySelector('box').style.display='block';

---

il manque un . dans la déclaration de ton sélecteur.

Citation:

---

Sinon, qu'il est nécessaire d'utiliser jquery.min.js pour réaliser ce que je cherche à faire.

---

pas compris le sens de la phrase \:oops:/

jQuery n'est pas « nécessaire » au sens premier du mot : tout ce que tu peux faire avec jQuery, tu peux le faire avec du JavaScript pur.

Je reviens sur les histoires de syntaxe des propriétés CSS. Le mieux est d'écrire deux petites fonctions pour passer du CSS au DOM et inversement :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

function css2dom( prop ){ return prop.toLowerCase().replace(/-([a-z])/g, function( _, letter ){ return letter.toUpperCase(); }); }   function dom2css( prop ){ return prop.replace(/[A-Z]/g, function( letter ){ return "-" + letter.toLowerCase(); }); }   // exemples var props = [ "border-radius", "CoLoR", "Text-Shadow", "-moz-animation-play-state", "-webkit-animation-play-state" ];   props.forEach(function( prop ){ console.log("%s -> %s -> %s", prop, css2dom(prop), dom2css(css2dom(prop))); });

---

Résultats :

Code:

---

1 2 3 4 5

border-radius -> borderRadius -> border-radius CoLoR -> color -> color Text-Shadow -> textShadow -> text-shadow -moz-animation-play-state -> MozAnimationPlayState -> -moz-animation-play-state -webkit-animation-play-state -> WebkitAnimationPlayState -> -webkit-animation-play-state

---

Citation:

---

il manque un . dans la déclaration de ton sélecteur.

---

Désolé pour cette mauvaise compréhension de la fonction.
Effectivement cela fonctionne bien mieux ainsi :

Code:

---

1 2 3 4 5

function fRangee () { document.querySelector('.box').style.display='none'; document.getElementById('ombre').style.display='none'; }

---

Merci pour les deux fonctions. Bien utiles pour s'exercer au principe des Upper & Lower CamelCase

Citation:

---

jQuery n'est pas « nécessaire » au sens premier du mot : tout ce que tu peux faire avec jQuery, tu peux le faire avec du JavaScript pur.

---

Non bien sûr, elle semble néanmoins compléter utilement JavaScript à tel point qu'elle se trouve fréquemment pour les sites web.

À présent que je comprends mieux .QuerySelector et vue la masse d'informations que vous m'avez fournies, je devrais pouvoir parvenir à mes fins.
J'éditerai ce message afin d'y proposer une solution fonctionnelle.

Merci pour tout.

***

Proposition de solution

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

#box { display: none; z-index: 3; position: fixed; left: 20%; width: 60%; height: 100%; padding: 0; margin: auto; border: 1px solid black; overflow: hidden; color: yellow; } #iExposee { max-height:400px; padding: 0; } #iExposee img { position: relative; max-height: 60%; max-width: 60%; padding: 20px; border: 1px solid yellow; border-radius: 5px; cursor: pointer; } #ombre { display: none; z-index: 2; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; } #iCartouche { display: inline-block; margin-bottom: 5px; background-color: red; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function fExposee(url) { var box = document.getElementById('box'); document.getElementById('ombre').style.display='block';   var title = document.getElementById('iCartouche'); title.innerHTML = url;   var content = document.getElementById('iExposee'); content.innerHTML = "<img id='iExposee' onclick='fRangee()' src='../IMG/"+url+"'></img>";   box.style.display='block'; } function fRangee () { document.getElementById('box').style.display='none'; document.getElementById('ombre').style.display='none'; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?php $nbrif_img=0; $nbrpreg_img=0; $handle=@opendir("../IMG"); //echo $handle."<br/>"; while ($fichier = @readdir($handle)){ $extension=substr($fichier,-3); if (isset($fichier) && $extension == "GIF" ) { $nbrif_img++; echo "<p data-tooltip='".substr($fichier, 0, -4)."' onclick=\"fExposee('".$fichier."');\"><img src='../IMG/".$fichier."'></img></p>";   } } ?>

---