Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1242 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1592701
arsunik
ma tuxitude me beastifie
Posté le 28-07-2007 à 11:41:36  profilanswer
 

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 ?

mood
Publicité
Posté le 28-07-2007 à 11:41:36  profilanswer
 

n°1592776
bixibu
Ca ... c'est fait!
Posté le 28-07-2007 à 20:26:04  profilanswer
 

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

n°1592800
mvdp
Posté le 28-07-2007 à 21:10:11  profilanswer
 

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

n°1592807
bixibu
Ca ... c'est fait!
Posté le 28-07-2007 à 21:22:06  profilanswer
 

:heink:

n°1592850
gatsu35
Posté le 28-07-2007 à 23:30:42  profilanswer
 

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=''">

n°1593086
arsunik
ma tuxitude me beastifie
Posté le 30-07-2007 à 00:01:45  profilanswer
 

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:

n°1695215
NounouRs
Non parce que c pas mon pied !
Posté le 29-02-2008 à 17:04:19  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
CSS dans Internet ExplorerComment vérifier si une feuille Excel existe ?
Problème CSS sur un bouton Récupérer le chemin du dossier courant
Récupérer valeurs sur un site web après un temps de calculNe pas récupérer certaines données ayant un champ identique
[VB Access]Recuperer les controls générés par access?[résolu] récupérer 2 variables dans <option> du <select>
[Batch] recuperer le log des fichiers copiésIntercation javascript et flash pour chargement d'image
Plus de sujets relatifs à : Récupérer des couleurs d'une feuille de style CSS avec javascript


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR