Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript dom style et :hover ???

dom style et :hover ???

18 réponses
Avatar
unbewusst.sein
peut-on changer, par dom style, la règle css associée à un sélecteur
contenant un :hover ???

je sais le faire par :
document.styleSheets[i].cssRules[j].style.cssText=...

mais je trouve que c'est nettement plus lent que par dom...

--
Une Bévue
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM

j'ai un cas où ça marche (presque) toujours,

<http://thoraval.yvon.free.fr/Table_layout/tests/table_layout_rules.xhtml>

preque veut dire que la couleur du texte et le font-size ne sont pas
affectés, mais bon, ça je sais le faire par ailleurs en DOM.


Ben ... vu que 'menuColorsObj' n'en parle pô du font-size
difficile de les changer (ça doit se passer ailleurs ?)

Par contre :
div#menu dl dt:hover':{'background-color':'#6aca6a',
'color':'#0cf'}
ça c'est OK chez moi

Qu'en dit le DOM iInspecteur de Firefox ?


il y a moyen de voir ça avec le dom inspector ???


non mais ColorZilla dans Fx peut montrer la couleur au survol
(celle qu'affiche le brouteur)

existe t'il une version pour ff 3.0b4 ???


aucune idée : version 2 du 27 fevr 2008
https://addons.mozilla.org/fr/firefox/addon/6622
<https://addons.mozilla.org/fr/firefox/search?q=dom+inspector&cat=all>

j'ai essayé récemment de l'installer mais j'ai eu une erreur...


Je préfère télécharger les fichiers des modules d'extensions puis les
installer moi-même ensuite.

non, j'écris par :

document.styleSheets[_icss].cssRules[_selectors[_icss].index(selector)].
style.cssText=<mon nouveau rule à moi>

et je relis par :
alert(document.styleSheets[_icss].cssRules[_selectors[_icss].index(selec
tor)].style.cssText)


donc tu relis ce que tu as écrit, pas plus.
(je ne sais par quel moyen on pourrait relire la feuille de styles modifiée)

ou bien de voir si la modif a été vue (vue != appliquée)
Vue, il y a des chances que oui.
Comprise, ... ça reste à déterminer.


comprise oui, car si j'envoie #0f0 je reçois rgb(0,255,0)...


enfin ... le brouteur l'a traduite quoi .

donc, me semble t'il l'erreur est de mon côté, mais je ne la vois pas...


Le Dom Inspector me dit qu'il y a :
div#menu dl dd ul li (back : 58,154,58 - pas de color)
div#menu dl dd ul li.curent (ni fond ni couleur)
div#menu dl dd ul li a (color: white - font: blabla)
mais rien pour le :hover

faut dire que je suis assez étourdi...


Heu avec 273125 lignes(*) de code on peut être un peu perdu ou étourdi,
me semble-ce ?

(*) Bon ... d'accord, que 390 lignes pour layout.js
+ 120 pour layout.css + qques autres de-ci de-là


j'ai m@&dé un bon bout de temps sur une boucle for écrite comme ça :

for(var icss=0;icss<_length;icss){...}


ha ! oui bon c'est pointilleux ce JS !
Il pourrait faire un effort tt de même !

--
sm


Avatar
unbewusst.sein
SAM wrote:

Tu veux dire que ColorZilla (ou autre color picker) dis que c'est orange
alors que Fx continue à afficher du jaune ?


non, non, c'est "au code", que je "regarde la couleur... ;-)
m'enfin, pour être sûr j'ai fais des changements tels que rouge -> bleu
)))

bon, maintenant que ça affiche les actions de modifs, on voit que le
change-menu-ok bégaie un peu :

BEFORE: div#menu dl dt:hover {
color: red; background-color: rgb(128, 128, 128);}
AFTER: div#menu dl dt:hover {
color: red; background-color: rgb(106, 202, 106);}
BEFORE: div#menu dl dt:hover {
color: red; background-color: rgb(106, 202, 106);}
AFTER: div#menu dl dt:hover {
color: rgb(255, 102, 0); background-color: rgb(106, 202, 106);}

ça aide peut-être le navigateur à comprendre ?


oui, ça c'est amélioré dans une version que je viens juste d'uploader.

avant, je mettais à jour chaque propriété, maintenant je mets à jour par
sélecteur donc, quand il y a deux propriétés comme ci-dessus
(background-color et color) maintenant ça ne met à jour + qu'une seule
fois car màj simultanée de tout le cssText d'un sélecteur...

bizarre


Bon, ici :
<http://thoraval.yvon.free.fr/Table_layout/table_layout.xhtml>
maintenant que mon navigateur a bien tout dans son cache,
le change-menu-ok ne prend que 2 ms
Je suis époustouflé !


avec le Log et le baratin ??? sur mon iMac G5 1.8 Ghz d'il y a 3 ans ça
prend 26 ms...

peut-être que je cherche un pb pour rien alors...

car change menu ok ça correspond au changement de toutes les couleurs
par css rules tandis que le non ok utilise dom (pour les éléments avec
id) + xpath (les autres mais qui n'ont pas de :hover dans le selecteur)
+ css rules (exclusivement les ceussent qui ont un :hover)...

ah oui, je viens de comparer avec une ancienne version des css rules,
ceux à la page :
<http://thoraval.yvon.free.fr/Table_layout/tests/table_layout_rules.xhtm
l>
chez moi "Change Menu Colors." met 966 ms et "Change Page Colors" 1234
ms...

MAIS je n'utilise + le même code entre ces deux versions, c'est une
bonne remarque que tu me fais là...

avant je procédais avec des sortes d'Array.

maintenant mes css rules sont gérés par deux Hash() imbriquées :

- au niveau le plus haut j'ai une hash de sélecteurs + value 1, value 1
étant elle-même une hash :
- au plus bas, donc, value 1, est une hash de propriétés + valeurs 2

par exemple :


hash de + haut niveau :

la clé , qui est le sélecteur peut être :
'div#menu dl dd ul li.current' cette clé, ce sélecteur pointe vers une
hash de plus bas niveau et qui contient :
'border-left-color' => '#c06',
'background-color' => '#6aca6a'
par exemple...

de plus, les hashes de + haut niveau sont dans une Array dont l'index
est le numéro de la style sheet

la première chose que mon code fait (lignes 293 à 312) dans function
init() c'est de transformer l'organisation des css d'array en hash.

je suis très agréablement surpris par le fait que ce soit plus rapide en
hash qu'en Array ( le code correspond au code commenté lignes 120 à
158)...

ceci étant dit je n'ai tjs pas trouvé le pb...

--
Une Bévue


Avatar
unbewusst.sein
SAM wrote:

Par contre :
div#menu dl dt:hover':{'background-color':'#6aca6a',
'color':'#0cf'}
ça c'est OK chez moi



avec "Change Menu Colors NOT OK" ??? chez moi rien au survol

par contre avec "Change Menu Colors OK", comme le nom l'indique, ça
roule...

un chez un truc bizarre aussi si je clique en premier sur "Change Menu
Colors NOT OK" les changements corrects de "Change Menu Colors OK"
n'apparaissent pas...

Qu'en dit le DOM iInspecteur de Firefox ?


il y a moyen de voir ça avec le dom inspector ???


non mais ColorZilla dans Fx peut montrer la couleur au survol
(celle qu'affiche le brouteur)

existe t'il une version pour ff 3.0b4 ???


aucune idée : version 2 du 27 fevr 2008
https://addons.mozilla.org/fr/firefox/addon/6622
<https://addons.mozilla.org/fr/firefox/search?q=dom+inspector&cat=all>


je vais regarder comment installer ça "à la manu"...


j'ai essayé récemment de l'installer mais j'ai eu une erreur...


Je préfère télécharger les fichiers des modules d'extensions puis les
installer moi-même ensuite.

non, j'écris par :

document.styleSheets[_icss].cssRules[_selectors[_icss].index(selector)].
style.cssText=<mon nouveau rule à moi>

et je relis par :
alert(document.styleSheets[_icss].cssRules[_selectors[_icss].index(selec
tor)].style.cssText)


donc tu relis ce que tu as écrit, pas plus.
(je ne sais par quel moyen on pourrait relire la feuille de styles modifiée)



c'est une modif interne hein...

ou bien de voir si la modif a été vue (vue != appliquée)
Vue, il y a des chances que oui.
Comprise, ... ça reste à déterminer.


comprise oui, car si j'envoie #0f0 je reçois rgb(0,255,0)...


enfin ... le brouteur l'a traduite quoi .

donc, me semble t'il l'erreur est de mon côté, mais je ne la vois pas...


Le Dom Inspector me dit qu'il y a :
div#menu dl dd ul li (back : 58,154,58 - pas de color)
div#menu dl dd ul li.curent (ni fond ni couleur)
div#menu dl dd ul li a (color: white - font: blabla)
mais rien pour le :hover

faut dire que je suis assez étourdi...


Heu avec 273125 lignes(*) de code on peut être un peu perdu ou étourdi,
me semble-ce ?

(*) Bon ... d'accord, que 390 lignes pour layout.js
+ 120 pour layout.css + qques autres de-ci de-là


j'ai m@&dé un bon bout de temps sur une boucle for écrite comme ça :

for(var icss=0;icss<_length;icss){...}


ha ! oui bon c'est pointilleux ce JS !
Il pourrait faire un effort tt de même !


juste pour deux "+" ...

--
Une Bévue



Avatar
SAM

un chez un truc bizarre aussi si je clique en premier sur "Change Menu
Colors NOT OK" les changements corrects de "Change Menu Colors OK"
n'apparaissent pas...


comme je suis un peu perdu entre les pages de tests et leurs sous-pages
Il m'est en effet arrivé que le non OK bloque définitivement le reste
(de mémoire)
Bon j'ai pris l'habitude de recharger dès que ça merdoie un peu.

https://addons.mozilla.org/fr/firefox/addon/6622
<https://addons.mozilla.org/fr/firefox/search?q=dom+inspector&cat=all>


je vais regarder comment installer ça "à la manu"...


c'est très facile :
- Fx menu Outils / Modules Complémentaires
- le dossier où est le truc xpi est ouvert à côté
- on glisse le truc dans le panneau des extensions-modules
- le bazard gueule un peu et ça s'installe dès qu'on lui a dit
de la mettre en sourdine
- reste à redémarrer Fx

for(var icss=0;icss<_length;icss){...}
ha ! oui bon c'est pointilleux ce JS !

Il pourrait faire un effort tt de même !


juste pour deux "+" ...


C'est vrai quoi ça ! tout le monde il avait compris ! non mais !

Au fait !
on m'a donné un aute module pour le code source
<https://addons.mozilla.org/en-US/firefox/addon/655>
Peut-être en mettant la FdS dans le fichier html, sera t-il possible de
voir les modifs effectives ?

--
sm



Avatar
SAM
SAM wrote:

Bon, ici :
<http://thoraval.yvon.free.fr/Table_layout/table_layout.xhtml>
maintenant que mon navigateur a bien tout dans son cache,
le change-menu-ok ne prend que 2 ms
Je suis époustouflé !


avec le Log et le baratin ??? sur mon iMac G5 1.8 Ghz d'il y a 3 ans ça
prend 26 ms...


click menu-ok ... vi vi avec baratin étoussa -> 2 ms
ha! là il a lambiné : 3 ms
Mais j'ai un "vieux" Fx peut-être moins gourmand ?
et pis je suis pas sous Léopard

peut-être que je cherche un pb pour rien alors...


Attention !
tt le monde ne débarque pas avec son cache (et sa RAM ?) gavé des
données kivontbien !

J'ai testé avec cache disabled (mais je n'ai pas ni redémarré Fx ni
re-booté l'ordi)
même résultat : 3 ms.

car change menu ok ça correspond au changement de toutes les couleurs
par css rules tandis que le non ok utilise dom (pour les éléments avec
id) + xpath (les autres mais qui n'ont pas de :hover dans le selecteur)
+ css rules (exclusivement les ceussent qui ont un :hover)...


M'en fous, il est dit que ça choisit totomatiquement la méthode la + courte.

ah oui, je viens de comparer avec une ancienne version des css rules,
ceux à la page :
<http://thoraval.yvon.free.fr/Table_layout/tests/table_layout_rules.xhtm
l>
chez moi "Change Menu Colors." met 966 ms et "Change Page Colors" 1234
ms...


les autres versions ça tournait à environ 500 ms chez moi
(pas essayé sur l'iMac G3/299 )

la première chose que mon code fait (lignes 293 à 312) dans function
init() c'est de transformer l'organisation des css d'array en hash.

je suis très agréablement surpris par le fait que ce soit plus rapide en
hash qu'en Array ( le code correspond au code commenté lignes 120 à
158)...

ceci étant dit je n'ai tjs pas trouvé le pb...


Hatch ! yapuka hacher les hash au hachoir

--
sm


Avatar
unbewusst.sein
SAM wrote:


c'est très facile :
- Fx menu Outils / Modules Complémentaires
- le dossier où est le truc xpi est ouvert à côté
- on glisse le truc dans le panneau des extensions-modules
- le bazard gueule un peu et ça s'installe dès qu'on lui a dit
de la mettre en sourdine
- reste à redémarrer Fx


on peut aussi, après téléchargement, glisser le xpi dans la fenêtre du
nav...

mais bon comme j'ai la version 3.0b4 il y a des tas de addon
incompatibles.

for(var icss=0;icss<_length;icss){...}
ha ! oui bon c'est pointilleux ce JS !

Il pourrait faire un effort tt de même !


juste pour deux "+" ...


C'est vrai quoi ça ! tout le monde il avait compris ! non mais !

Au fait !
on m'a donné un aute module pour le code source
<https://addons.mozilla.org/en-US/firefox/addon/655>
Peut-être en mettant la FdS dans le fichier html, sera t-il possible de
voir les modifs effectives ?


ff me dit non compatible avec la 3.0b4...
--
Une Bévue




Avatar
SAM
SAM wrote:

<https://addons.mozilla.org/en-US/firefox/addon/655>
Peut-être en mettant la FdS dans le fichier html, sera t-il possible de
voir les modifs effectives ?


ff me dit non compatible avec la 3.0b4...


Pas d'bol.

--
sm


Avatar
unbewusst.sein
SAM wrote:


Pas d'bol.


enfin, il y a un moyen d'utiliser ff 2 (lequel ?)
et de lancer ff 2 sur un autre compte de manière à avoir ff 2 et 3
tournant en même temps...
--
Une Bévue

1 2