Discussion :

[Orang-]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci

[SpaceFrog]

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

[Orang-]

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

[SpaceFrog]

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

[Orang-]

Voici un extrait de la balise :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[freddou17]

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

++

[Orang-]

Merci freddou17, je vais voir ça.

[SylvainPV]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

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

Un peitit tour par la : 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 ) un opérateur de soustraction... donc quand tu écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Orang-]

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

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.

[Orang-]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

Bonjour,

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.

[Bovino]

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

[Orang-]

Bonjour,
une ID DOIT ETRE UNIQUE.

Merci.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}

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

[Orang-]

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

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

Il ne reste que cette solution du coup :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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>";
?>

[Bovino]

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

[SylvainPV]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Orang-]

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 JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

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

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

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 \/