Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

astuce avec display block/none

2 réponses
Avatar
unbewusst.sein
je sais qu'il y a une astuce, mais ne m'en souviens plus, à propos du
basculement de display de 'none' à 'block'.

j'ai une function toggleDisplay qui a pour but de basculer display à
none s'il est à block et lycée de versailles, pour l'instant je fais :

E.style['display']=(DOM.getStyle(E,'display')=='none')? 'block' :
'none';

mais ça ne marche pas du 1ier coup, il faut qqfois (dépend du
navigateur) deux 1ier clicks pour que ça commence à basculer impec...

mes divs dans le css sont à display:none au départ...


--
Artaban de Médée

2 réponses

Avatar
ASM
je sais qu'il y a une astuce, mais ne m'en souviens plus, à propos du
basculement de display de 'none' à 'block'.


Le principe :
- l'élement n'est pas stylé d'origine à 'none'
- le swicht consite donc à : ''<-->'none'

ce qui nous donne

function switcher(element) {
var e = element.style;
e.display = e.display==''? 'none' : '';
}

On teste donc l'état 'normal' d'abord.

mes divs dans le css sont à display:none au départ...


et donc on ne peut appliquer le principe général
De plus, et si je ne me trompe, comme ce n'est pas le JS qui a stylé, il
est dans l'ignorance du style.

Essayer voir :

function switcher(element) {
var e = element.style;
e.display = e.display==''? 'block' : '';
}

Mais il faut être certain que 'element' est un bloc.
Sinon il faudra un switch pour chaque type, ce qui va poser pb avec IE
et les tables (table != block)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
unbewusst.sein
ASM wrote:

Le principe :
- l'élement n'est pas stylé d'origine à 'none'
- le swicht consite donc à : ''<-->'none'

ce qui nous donne

function switcher(element) {
var e = element.style;
e.display = e.display==''? 'none' : '';
}

On teste donc l'état 'normal' d'abord.


AH OK, merci beaucoup, je m'en souviendrai ))


mes divs dans le css sont à display:none au départ...


et donc on ne peut appliquer le principe général
De plus, et si je ne me trompe, comme ce n'est pas le JS qui a stylé, il
est dans l'ignorance du style.
ça dépend du navigateur : avec ff j'arrive du 1ier coup à lire 'none',

avec WebKit ça me retourne ''... et seulement 'none'|'block' quand c'est
le js qui a setté cette valeur...
Essayer voir :

function switcher(element) {
var e = element.style;
e.display = e.display==''? 'block' : '';
}



ce que j'ai fais et qui roule du 1ier coup (qu'il y ait -- ou pas -- un
display:none dans le css):

(e.display=='none' || e.display=='') 'block' : 'none';

ça, ça marche même avec WebKit, le seul nav qui ne donnait pas la bonne
réponse tout de suite.

ça marche aussi avec ff...

Mais il faut être certain que 'element' est un bloc.
Sinon il faudra un switch pour chaque type, ce qui va poser pb avec IE
et les tables (table != block)


ouais, j'ai vu déjà dans mon css un "hack IE" :

#container {display:inline-block;}

--
Artaban de Médée