Récupérer des couleurs d'une feuille de style CSS avec javascript

Récupérer des couleurs d'une feuille de style CSS avec javascript - HTML/CSS - Programmation

Marsh Posté le 28-07-2007 à 11:41:36    

Afin de permettre l'utilisation de thèmes pour un site, je voudrais paramètrer la couleur de surlignage d'une ligne de tableau depuis une feuille de style.
Je n'ai rien trouvé d'autre que du javascript pour effectuer ce surlignage :
 

<tr onmouseover="this.style.backgroundColor='#FF8888'"
    onmouseout="this.style.backgroundColor = ''"


 
J'ai réussi à trouver un truc pour aller chercher la couleur dans la feuille de style (ce code prend la couleur du premier élément de la première feuille de style) :
 

<tr onmouseover="this.style.backgroundColor = document.styleSheets[0].cssRules[0].style.getPropertyValue('color')"
    onmouseout="this.style.backgroundColor = ''"


 
Dans la feuille de style je met au début :

/* A laisser en premier : couleur du surlignage avec la souris dans les tableaux */
TR.surligne {
        color: #F88;
}


 
Le problème c'est qu'avec Firefox ça fonctionne mais avec pas avec I.E.  :cry:
Où est le problème ?

Reply

Marsh Posté le 28-07-2007 à 11:41:36   

Reply

Marsh Posté le 28-07-2007 à 20:26:04    

Pour IE faut utiliser :document.styleSheets[0].rules[0]

Reply

Marsh Posté le 28-07-2007 à 21:10:11    

premier élément de la première feuille de style
firefox:
document.styleSheets[0].cssRules[0]  
IE:
document.styleSheets[0].rules[0]  

Reply

Marsh Posté le 28-07-2007 à 21:22:06    

:heink:

Reply

Marsh Posté le 28-07-2007 à 23:30:42    

et si tu appliquait la classe "surligne" au lieu d'aller recuperer la couleur.  
Aux dernieres nouvelles c'est à ca que servent les CSS.
Là tu déclare une classe "Surligne" et avec du JS tu essayes de récupérer la couleur et de l'appliquer. Autant appliquer la classe CSS.
à la porcasse :  

Code :
  1. <tr onmouseover="this.className='surligne'"
  2.     onmouseout="this.className=''">

Message cité 1 fois
Reply

Marsh Posté le 30-07-2007 à 00:01:45    

Merci. C'est pénible ces différences IE/reste du monde :(
 

gatsu35 a écrit :

et si tu appliquait la classe "surligne" au lieu d'aller recuperer la couleur.  


 
Bah je voulais faire simple et permettre uniquement le changement de la couleur de fond  :sweat:  
Mais vu la complexité de la chose je vais opter pour ta solution  :hello:

Reply

Marsh Posté le 29-02-2008 à 17:04:19    

C'est un peu a cote de la plaque, mais j'ai des fonctions de manipulation des couleurs HTML :
 
Ca permet de manipuler en RVB sans s'emmerder... si vous avez des remarques à faire...
 

Code :
  1. function html2rgb(color) {
  2. // gestion du #...
  3. if (color.substr(0,1)=="#" ) { color=color.substr(1,6); }
  4. var tabRGB = new Array(3);
  5. tabRGB[0] = hex2dec(color.substr(0, 2));
  6. tabRGB[1] = hex2dec(color.substr(2, 2));
  7. tabRGB[2] = hex2dec(color.substr(4, 2));
  8. return tabRGB;
  9. }
  11. // string rgb2html(Array tablo)
  12. // La réciproque exacte de la fonction html2rgb, avec comme paramètre un Array.
  13. function rgb2html(tablo) {
  14. // Vérification des bornes...
  15. for(var i=0;i<3;i++) {
  16.  tablo[i]=bornes(tablo[i],0,255);
  17. }
  18. // Le str_pad permet de remplir avec des 0 les valeurs inferieures à 0F
  19. // parce que sinon rgb2html(Array(0,255,255)) retournerai #0ffff<=manque un 0 !
  20. return "#" + String(str_pad(dec2hex(tablo[0]),2,"0",0)) + String(str_pad(dec2hex(tablo[1]),2,"0",0)) + String(str_pad(dec2hex(tablo[2]),2,"0",0));
  21. }
  23. function str_pad(chaine, taille, elem, sens) { // 0 = left , 1 = right, 2 = center
  24. var orientation = 0;
  25. while(chaine.length < taille) {
  26.  if( (sens == 0 || sens == 2) && orientation == 0) {
  27.     chaine = elem + chaine;
  28.   }
  29.   if( (sens == 1 || sens == 2) && orientation == 1) {
  30.     chaine = chaine + elem;
  31.   }
  32.   orientation = 1 - orientation;
  33. }
  34. return chaine.substr(0,taille);
  35. }
  37. // borner les nombres entre 0 et 255.
  38. function bornes(nb,min,max) {
  39. if (nb<min) { nb=min; }
  40. if (nb>max) { nb=max; }
  41. return nb;
  42. }
  44. // base 10 vers base 16 (int vers chaine)
  45. function dec2hex(dec) {
  46.   var hexa="0123456789ABCDEF";
  47.   var hex="";
  48.   while (dec>15) {
  49.     tmp=dec-(Math.floor(dec/16))*16;
  50.     hex=hexa.charAt(tmp)+hex;
  51.     dec=Math.floor(dec/16);
  52.   }
  53.   hex=hexa.charAt(dec)+hex;
  54.   return(hex);
  55. }
  57. // base 16 vers base 10 (chaine vers int)
  58. function hex2dec(hex) {
  59.   return parseInt(hex,16);
  60. }
  62. // -------------------------------------------------------------------
  63. // donne la teinte de gris correspondant à la couleur
  64. function niveauGris(tabcoul) {
  65. return bornes( parseInt(0.299 * (tabcoul[0]) + 0.587 * (tabcoul[1]) + 0.114 * (tabcoul[2]), 10));
  66. }
  68. function seuil(tabcoul) {
  69.   var seuil = 145;
  70. if (niveauGris(tabcoul) < seuil) {return 0;} else {return 255;}
  71. }
  73. // -------------------------------------------------------------------
  74. function grisRGB(tabcoul) {
  75.    var nuance = niveauGris(tabcoul);
  76.    var tabRGB = new Array(3);
  77.    for (var i=0; i<3; i++) {
  78.      tabRGB[i] = nuance;
  79.    }
  80.    return tabRGB;
  81. }
  83. // La fonction de seuil donne noir
  84. function seuilRGB(tabcoul) {
  85.   var NouB = seuil(tabcoul);
  86. var tabRGB = new Array(3);
  87.   for (var i=0; i<3; i++) {
  88.  tabRGB[i] = NouB;
  89.   }
  90. return tabRGB;
  91. }
  93. function inverseRGB(tabcoul) {
  94. var tabRGB = new Array(3);
  95. for (var i=0; i<3; i++) {
  96.   tabRGB[i] = bornes(255-tabcoul[i]);
  97. }
  98. return tabRGB;
  99. }


Message édité par NounouRs le 29-02-2008 à 17:05:34
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed