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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Récupérer des couleurs d'une feuille de style CSS avec javascript

arsunik

ma tuxitude me beastifie

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 ?

Publicité

bixibu

Ca ... c'est fait!

Pour IE faut utiliser ocument.styleSheets[0].rules[0]

mvdp

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

bixibu

Ca ... c'est fait!

:heink:

gatsu35

Blablaté par Harko

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 :

<tr onmouseover="this.className='surligne'"
onmouseout="this.className=''">

Message cité 1 fois

arsunik

ma tuxitude me beastifie

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:

NounouRs

Non parce que c pas mon pied !

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 :

function html2rgb(color) {
// gestion du #...
if (color.substr(0,1)=="#" ) { color=color.substr(1,6); }
var tabRGB = new Array(3);
tabRGB[0] = hex2dec(color.substr(0, 2));
tabRGB[1] = hex2dec(color.substr(2, 2));
tabRGB[2] = hex2dec(color.substr(4, 2));
return tabRGB;
}
// string rgb2html(Array tablo)
// La réciproque exacte de la fonction html2rgb, avec comme paramètre un Array.
function rgb2html(tablo) {
// Vérification des bornes...
for(var i=0;i<3;i++) {
tablo[i]=bornes(tablo[i],0,255);
}
// Le str_pad permet de remplir avec des 0 les valeurs inferieures à 0F
// parce que sinon rgb2html(Array(0,255,255)) retournerai #0ffff<=manque un 0 !
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));
}
function str_pad(chaine, taille, elem, sens) { // 0 = left , 1 = right, 2 = center
var orientation = 0;
while(chaine.length < taille) {
if( (sens == 0 || sens == 2) && orientation == 0) {
chaine = elem + chaine;
}
if( (sens == 1 || sens == 2) && orientation == 1) {
chaine = chaine + elem;
}
orientation = 1 - orientation;
}
return chaine.substr(0,taille);
}
// borner les nombres entre 0 et 255.
function bornes(nb,min,max) {
if (nb<min) { nb=min; }
if (nb>max) { nb=max; }
return nb;
}
// base 10 vers base 16 (int vers chaine)
function dec2hex(dec) {
var hexa="0123456789ABCDEF";
var hex="";
while (dec>15) {
tmp=dec-(Math.floor(dec/16))*16;
hex=hexa.charAt(tmp)+hex;
dec=Math.floor(dec/16);
}
hex=hexa.charAt(dec)+hex;
return(hex);
}
// base 16 vers base 10 (chaine vers int)
function hex2dec(hex) {
return parseInt(hex,16);
}
// -------------------------------------------------------------------
// donne la teinte de gris correspondant à la couleur
function niveauGris(tabcoul) {
return bornes( parseInt(0.299 * (tabcoul[0]) + 0.587 * (tabcoul[1]) + 0.114 * (tabcoul[2]), 10));
}
function seuil(tabcoul) {
var seuil = 145;
if (niveauGris(tabcoul) < seuil) {return 0;} else {return 255;}
}
// -------------------------------------------------------------------
function grisRGB(tabcoul) {
var nuance = niveauGris(tabcoul);
var tabRGB = new Array(3);
for (var i=0; i<3; i++) {
tabRGB[i] = nuance;
}
return tabRGB;
}
// La fonction de seuil donne noir
function seuilRGB(tabcoul) {
var NouB = seuil(tabcoul);
var tabRGB = new Array(3);
for (var i=0; i<3; i++) {
tabRGB[i] = NouB;
}
return tabRGB;
}
function inverseRGB(tabcoul) {
var tabRGB = new Array(3);
for (var i=0; i<3; i++) {
tabRGB[i] = bornes(255-tabcoul[i]);
}
return tabRGB;
}

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
CSS dans Internet Explorer	Comment 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 calcul	Ne 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és	Intercation javascript et flash pour chargement d'image
Plus de sujets relatifs à : Récupérer des couleurs d'une feuille de style CSS avec javascript

Page générée en 0.063 secondes