css/javascript/firefox attribut hors standard

Marsh Posté le 29-04-2005 à 10:56:09

style_1 { font-family: Courier; font-size: 10pt; padding: 0;background-color: #FFFFFF; colorActif: #57C0F2; color: #000000; border: 1px groove; }

voilà j'ai defini ma css comme ci dessus
l'attribut colorActif n'existe pas dans les standards
sous IE je peux qd meme y a acceder
j'ai codé cette fonction pour retrouver la css qui m'interesse:

function findStyleRule(styleName) {
var stS=document.styleSheets?document.styleSheets: document.styleSheet;
var ok=stS[0].rules?1:0;
for (i = 0; i < stS.length; i++)
for (j = 0; j < eval("stS[i]."+(ok?"rules":"cssRules" )+".length" ); j++)
if (eval("stS[i]."+(ok?"rules":"cssRules" )+"[j].selectorText" ) == styleName)
return eval("stS[i]."+(ok?"rules":"cssRules" )+"[j]" );
}

cette fonction marche sous IE et firefox
soit _field un champ input text

strule=findStyleRule("."+_field.className).style;
sous IE je recupère strule.colorActif
mais sous firefox je n'ai rien

j'ai testé strule.cssText
sous IE il me sort tout ce que j'ai enregistré pour le style
sous firefox seulement les attribut du standard

Je cherche donc une solution pour accéder à la valeur d'un attribut d'une css que j'ai défini moi-meme et n'étant donc pas dans les standards

Si vous connaissez une autre manière de definir la couleur d'un element actif c a dire comme pour les liens en css par exemple hover actif .... je suis preneur

Mon but est de changer la couleur du background du champ input qd celui est sélectionné (en gros un curseur)
je veux absolument passer par les css (j'ai mes raisons et ça serait trop long à expliquer)

Merci d'avance pour vos réponses

Reply

Marsh Posté le 29-04-2005 à 10:56:09

Reply

Marsh Posté le 29-04-2005 à 10:58:05

pouet:active {
color: #57C0F2;
}

Et tu fait le p'tit script pour le support pour IE. Sur les autres navigateurs, ça fonctionnera d'origine.

Reply

Marsh Posté le 29-04-2005 à 11:15:38

FlorentG a écrit :

pouet:active {
color: #57C0F2;
}

Et tu fait le p'tit script pour le support pour IE. Sur les autres navigateurs, ça fonctionnera d'origine.

tu veux dire du style :

<style>.pouet:active {
background-color: #57C0F2;
}</style>
<input type="text" id="pouet" name="pouet">

en fait ça marche pour les liens mais pas pour les champs ou j'écris mal qque chose ms je sais pas quoi

Reply

Marsh Posté le 29-04-2005 à 11:17:26

En fait après test, je ne crois pas que ce soit possible, il faut malheureusement passer par du JavaScript, en attachant les événements onfocus et onblur...

Reply

Marsh Posté le 29-04-2005 à 11:17:46

non

Code :

<style type="text/css">.pouet:active {
background-color: #57C0F2;
}</style>
<input type="text" class="pouet" name="pouet" />

si tu inclus des css, autant le faire a fond et respecter les standards...

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 11:18:49

Ah non pardon, faut faire comme ça :

input:focus {
background: #57c0f2;
}

Testé et approuvé sous FireFox, mais IE ne gère évidemment pas

Reply

Marsh Posté le 29-04-2005 à 11:22:41

Merci beaucoup

pour IE plus qu'à adapter ma premiere solution à celle là lol

Message édité par makinatoto le 29-04-2005 à 11:26:06

Reply

Marsh Posté le 29-04-2005 à 11:23:10

Maintent reste à faire fonctionner sous IE avec un bout de JS

Reply

Marsh Posté le 29-04-2005 à 11:28:39

pour ie, arrange toi avec ces deux fonctions js...

Code :

// leave container arg out, and will default to document.
// code from http://www.webmasterworld.com/forum91/1757.htm (unbugged)
function getElementsByClassName(className,container)
{
container = container||document ;
var all = container.all||container.getElementsByTagName('*');
var arr = [] ;
var att = (document.all)?"className":"class"; // className for IE & class for Mozilla
for(var k=0;k<all.length;k++)
if(all[k].getAttribute(att) == className)
arr[arr.length] = all[k];
return arr
}

Code :

function setClassName(id,cla)
{
var att = (document.all)?"className":"class"; // className for IE & class for Mozilla
document.getElementById(id).setAttribute(att,cla);
}

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 11:33:22

Ca fonctionne avec les elements qui ont plusieurs classes ??

Message édité par cerel le 29-04-2005 à 11:33:34

Reply

Marsh Posté le 29-04-2005 à 11:33:22

Reply

Marsh Posté le 29-04-2005 à 11:38:52

j'ai pas testé...

getAttribute renverrai donc un tableau ??

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 11:43:39

et non, getAttribute renvoi exactement la string du class, donc toutes les classe séparée par des espaces...

ca existe "explode" en javascript ??

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 12:39:58

allez hop

// leave container arg out, and will default to document.
// code from http://www.webmasterworld.com/forum91/1757.htm (unbugged)
// 050429: now also work with multi class elements.
function getElementsByClassName(className,container)
{
container = container||document ;
var all = container.all||container.getElementsByTagName('*');
var arr = [] ;
var cla = [] ; var tmp;
var att = (document.all)?"className":"class"; // className for IE & class for Mozilla

for(var k=0;k<all.length;k++)
{
tmp = all[k].getAttribute(att);
if(!tmp) continue;
cla = tmp.split(" " );

for(var l=0;l<cla.length;l++)
{
if(cla[l] == className)
{
arr[arr.length] = all[k];
break;
}
}
}
return arr
}

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 14:35:41

document.getElementsByClass = function (needle, tag) {
if(!tag)
tag="*"
var my_array = document.getElementsByTagName(tag);
var retvalue = new Array();
var i;
var j;

for (i = 0, j = 0; i < my_array.length; i++)
{
var c = " " + my_array[i].className + " ";
if (c.indexOf(" " + needle + " " ) != -1)
retvalue[j++] = my_array[i];
}
return retvalue;
}

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 29-04-2005 à 14:42:04

j'ai encore bcp a apprendre en optimisation [:matleflou]

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 29-04-2005 à 14:45:40

C'est pas complètement de moi (j'ai juste optimisé pour ajouter un tag optionnel en plus de la classe), ça vient du Glazblog
Il y a des versions largement plus avancées, mais non fonctionnelles sous MSIE

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 02-05-2005 à 17:53:13

juste petite information :

la pseudo classe ":hover" ne fonctionne qu'avec l'attribut A sous IE, sous les autres navigateurs (FF, Opera..) ca fonctionne avec presque tout.

Si je dis une bêtise fouettez moi

Reply

Marsh Posté le 02-05-2005 à 17:58:03

gatsusat a écrit :

juste petite information :

la pseudo classe ":hover" ne fonctionne qu'avec l'attribut A sous IE, sous les autres navigateurs (FF, Opera..) ca fonctionne avec presque tout.

Si je dis une bêtise fouettez moi

Nope, c'est exactement ça (mais un certain nombre de "patchs" en JS sont nés pour pallier à la chose)
(c'est d'ailleurs relativement simple à faire)

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 02-05-2005 à 19:13:56

Et si on est comme moi, on prend même pas la peine de mettre du JS :sol:

Reply

Marsh Posté le 02-05-2005 à 20:10:47

FlorentG a écrit :

Et si on est comme moi, on prend même pas la peine de mettre du JS :sol:

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

css/javascript/firefox attribut hors standard

Sujets relatifs:

Leave a Replay