Plusieurs classes CSS dans une fonction JavaScript

Version imprimable

Bonjour,

Je débute en javaScript et J'aimerais appeler cette fonction javascript :

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
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton')};

à partir de deux classe css différentes :

Code:

1
2
3
4
5
.bouton { background:transparent; border:4px outset; border-radius: 0.625em; } 
div.bouton,a.bouton,img.bouton { border-color:white; padding:0.125em 0.25em;  }
 
.btnrub { background:transparent; border:4px outset; border-radius: 1em; } 
div.btnrub,a.btnrub,img.btnrub { border-color:white;}

Est-ce possible ?

Si oui avec quel avec quel contraintes et quel syntaxe ?

22/05/2015, 08h53
Bovino

Tu cherches quoi exactement ?
Appliquer ta fonction aux éléments possédant au moins une des classes, sur ceux ayant les deux ou sur une classe sachant que l'élément ciblé possède aussi une autre classe ?
22/05/2015, 09h08
Lillie CHARLOTTE

Bonjour Bovino,

Voici la page que je travaille:
http://ippai.free.fr/materiel-papiers.php

J'aimerais pouvoir utiliser 2 class de boutons en même temps sur la même page :
Sur les boutons de rubriques principale img, sans padding
et sur des boutons de sous rubrique href, avec un padding de 2 et 4px.

Et avoir l'animation inset outset sans bug.
Quand j'ai tenté de modifié le script, en remplaçant bouton par : bouton,btnrub
Les images des gros boutons se détachaient de la page, je n'ais donc pas due utiliser la bonne syntaxte :? !
22/05/2015, 12h24
SylvainPV

Simplement comme ça :

Code:

window.onload = function(){ bordure('bouton') bordure('btnrub'); };

Si tu es obligé d'appeler deux fois la fonction, ça vient de ta condition:
if(boutons[b].className==bouton){La fonction est prévue pour tester simplement la valeur de l'attribut "class". C'est pas pratique du tout car si on met juste une classe de plus (class="bouton truc" par exemple), même si elle n'a aucun rapport, le code ne fonctionnera plus. Mieux vaudrait utiliser if(boutons[b].classList.contains(bouton)){.

Pour ce genre de fonctions, utiliser jQuery simplifierait beaucoup de choses.

Merci de ta réponse SylvainPV,

Du coups plus souple de rajouter un seconde fonction ?

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
46
function bordrub(btnrub){ 
   btnrubs=document.getElementsByTagName('img') 
  for (r=0;r<btnrubs.length;r++){ 
  if(btnrubs[r].className==btnrub){ 
  btnrubs[r].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  btnrubs[r].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  btnrubs[r].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton'); bordrub('btnrub');  };

mais dans ce cas j'ai un joli bug sur les bouton image qui reste accroché au cursseur.

22/05/2015, 14h29
Auteur

bonjour,

un point important : déclare tes variables !
22/05/2015, 17h23
Lillie CHARLOTTE

Bonsoir Auteur,

C'est à dire :oops: ?
22/05/2015, 19h19
Auteur
Dans tes fonctions tu as plusieurs variables : r, boutons, btnrubs etc. déclare les avec le mot-clef var.
Code:

1 2 3 4 5 6 7 function bordrub(btnrub) { var btnrubs, r; // déclaration des variables (variables locales car déclarées dans une fonction) // suite du code }
Cela pourrait t'éviter de mauvaises surprises ;)
Autre détail : je ne suis pas très fan des noms de variables qui ne diffèrent que d'une lettre : btnrubs et btnrub ou encore bouton et boutons. Pour des scripts plus longs, tu peux te mélanger les pinceaux.
22/05/2015, 20h35
Lillie CHARLOTTE

Merci de la remarque, mais du coups avoir 2 class dans un fonction *.js ça n'est pas très bon on dirait ?
22/05/2015, 21h59
Auteur

Tu peux mettre autant de fonctions (tu as des fonctions pas des classes dans ce code) que tu veux dans un fichier js.

Javascript n'est pas java : en java le fichier ne peut contenir qu'une classe et doit porter le nom de cette classe. En javascript, qui est un langage très différent de java, tu n'as pas cette contrainte.
22/05/2015, 22h51
Lillie CHARLOTTE

bouton et btnrub sont des class css dans mon *.js :) !
22/05/2015, 23h42
SylvainPV

Aucun rapport entre les classes CSS et les fonctions JavaScript, pour JavaScript ta classe CSS est une bête String rien de plus. C'est ta fonction qui est mal conçue, elle ne prend qu'une seule classe en argument donc aucune chance qu'elle en teste plusieurs en même temps.

Revois le passage d'arguments aux fonctions et l'utilisation des Arrays.

C'est mieux comme ça ?

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
function getBalises() { 
      ret  = new Array; 
 
      tds  = document.getElementsByTagName('td'); 
      for(i = 0 ; i < tds.length ; i++) { 
         ret[ret.length] = tds.item(i); 
      } 
 
      divs = document.getElementsByTagName('div'); 
      for(i = 0 ; i < divs.length ; i++) { 
         ret[ret.length] = divs.item(i); 
      } 
 
      as = document.getElementsByTagName('a'); 
      for(i = 0 ; i < as.length ; i++) { 
         ret[ret.length] = as.item(i); 
      } 
 
      imgs = document.getElementsByTagName('img'); 
      for(i = 0 ; i < imgs.length ; i++) { 
         ret[ret.length] = imgs.item(i); 
      } 
 
      return ret; 
   } 
 
function bordure(bouton) { 
  var boutons, b;
 
  boutons=getBalises(); 
 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='over';} //Hors zone 
  } 
 } 
} 
window.onload = function(){ bordure('bouton'); };

Code:

1
2
3
.bouton { background:transparent; border:4px outset; border-color:white; } 
a.bouton,td.bouton { padding:0.125em 0.25em; border-radius: 0.625em; }
img.bouton,div.bouton { border-radius: 1em; }

J'ai simplifié le problème des deux styles différents en séparant:
les styles <a class="bouton" href"" /> et <td class="bouton"> avec padding et radius.
les styles <img class="bouton" src"" /> et <div class="bouton"> sans padding et avec un radius plus important.

.

Non pas du tout c'est même bien pire qu'avant :aie: Ils sont si mauvais que ça les tutos arrays sur le net ?

déjà on déclare les arrays comme ça : var array=[];ensuite pour ajouter un élément, c'est la méthode push, pas l'affectation de l'index length (beurk): array.push(42)enfin je ne sais pas ce que tu as compris mais document.getElementsByTagName te renvoie déjà une collection, à quoi ça servait de faire tout ce bazar pour récupérer une array alors que tu savais déjà les parcourir avec une boucle for ? ça t'a pas paru bizarre ?

Je parlais d'utiliser les arrays pour passer la liste des classes à tester et t'éviter d'appeler deux fois ta fonction. Par exemple avec les méthodes map et join tu peux facilement produire une liste de sélecteurs avec toutes tes balises et toutes tes classes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function bordure(classes, tags){ //classes est la liste des classes, tags la liste des balises var selecteurs = classes.map(function(classe){ return tags.map(function(tag){ return tag+"."+classe; }).join(", ") }).join(", "); var boutons = document.querySelectorAll(selecteurs); for (var b=0;b<boutons.length;b++){ boutons[b].addEventListener("mousedown", function(){this.style.borderStyle='inset'; }); //Activé boutons[b].addEventListener("mouseup", function(){this.style.borderStyle='outset'; }); //Relaché boutons[b].addEventListener("mouseout", function(){this.style.borderStyle='outset'; }); //Hors zone } } bordure(["bouton","btnrub"], ["td","div","a","img"]);
ce qui aurait pu aussi être fait à la main si tu n'avais pas une liste aussi énorme :

Code:

var boutons = document.querySelectorAll("td.bouton, div.bouton, a.bouton, img.bouton, td.btnrub, div.btnrub, a.btnrub, img.btnrub");

Après j'ai répondu à ta question sur cette fonction mais entre nous, je ne comprends pas ce que fait cette fonction que CSS ne pourrait pas faire tout seul:
Code:

1 2 3 .bouton, .btnrub { border-style: 'outset'; } .bouton:active, .btnrub:active { border-style: 'inset'; }

Citation:

Envoyé par SylvainPV

Non pas du tout c'est même bien pire qu'avant :aie: Ils sont si mauvais que ça les tutos arrays sur le net ?

C'est plutôt moi qui n'est pas douée pour trouver les informations :( !

Citation:

Envoyé par SylvainPV

déjà on déclare les arrays comme ça : var array=[];ensuite pour ajouter un élément, c'est la méthode push, pas l'affectation de l'index length (beurk): array.push(42)enfin je ne sais pas ce que tu as compris mais document.getElementsByTagName te renvoie déjà une collection, à quoi ça servait de faire tout ce bazar pour récupérer une array alors que tu savais déjà les parcourir avec une boucle for ? ça t'a pas paru bizarre ?

J'avoue :oops: ...
Citation:
Envoyé par SylvainPV
Je parlais d'utiliser les arrays pour passer la liste des classes à tester et t'éviter d'appeler deux fois ta fonction. Par exemple avec les méthodes map et join tu peux facilement produire une liste de sélecteurs avec toutes tes balises et toutes tes classes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function bordure(classes, tags){ //classes est la liste des classes, tags la liste des balises var selecteurs = classes.map(function(classe){ return tags.map(function(tag){ return tag+"."+classe; }).join(", ") }).join(", "); var boutons = document.querySelectorAll(selecteurs); for (var b=0;b<boutons.length;b++){ boutons[b].addEventListener("mousedown", function(){this.style.borderStyle='inset'; }); //Activé boutons[b].addEventListener("mouseup", function(){this.style.borderStyle='outset'; }); //Relaché boutons[b].addEventListener("mouseout", function(){this.style.borderStyle='outset'; }); //Hors zone } } bordure(["bouton","btnrub"], ["td","div","a","img"]);
ce qui aurait pu aussi être fait à la main si tu n'avais pas une liste aussi énorme :

Code:

var boutons = document.querySelectorAll("td.bouton, div.bouton, a.bouton, img.bouton, td.btnrub, div.btnrub, a.btnrub, img.btnrub");
Merci de cette solution, qui fonctionne à partir de Internet Explorer 9.
Citation:
Envoyé par SylvainPV
Après j'ai répondu à ta question sur cette fonction mais entre nous, je ne comprends pas ce que fait cette fonction que CSS ne pourrait pas faire tout seul:
Code:

1 2 3 .bouton, .btnrub { border-style: 'outset'; } .bouton:active, .btnrub:active { border-style: 'inset'; }
Justement, pour pallier le non fonctionnement de td.bouton:active en CSS avec Internet Explorer 5.5 6 7 et 8.

Mais depuis 2005, avec le recul je commence à me demander si je ne devrait pas me limiter à <img src""> et <a href=""> pour cette fonction comme me le faisait remarquer Kerod à l'époque :? !?

Donc oui, se simple code CSS ferait la même chose :roll: ...
Code:

1 2 3 4 .bouton { background:transparent; border:4px outset; border-color:#D4D4D4; } .bouton:active { border:4px inset; border-color:#D4D4D4; } a.bouton,td.bouton { padding:0.125em 0.25em; border-radius: 0.625em; } img.bouton,div.bouton { border-radius: 1em; }
Merci de toutes vos réponses :merci: !