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

interaction JS / CSS pour display

5 réponses
Avatar
unbewusst.sein
un truc qu'SM m'a sans doute déjà expliqué, mais apparemment je n'ai pas
bien pigé...

soit un noeud 'dd' dont le css est à :

dd {display: none;}


cette partie de css est dans un fichier externe "machin.css".

si je lis la ppté <mon dd>.style.display j'obtiens :

""

warum ???

pourtant le dd qui contient <ul><li>...</li></ul> n'est pas développé.


si dans mon css je commente cette ligne dd {display:none;} alors tous
les dd sont déployés, ce que je ne souhaite pas par défaut (après le
onload de la page)


ce que basiquement je ne pige pas c'est que au lieu de none j'obtiens ""
par JS par contre si je set ça par js à none, ça me retourne bien none.


j'ai une function toggle (qui déploie si non déployé et collège de
Sceau) shématiquement :

truc.style.display=(truc.style.display=='')? 'block' : '';

ça marche ezactement kom je voeux ;-)

c'est peut-être un truc où il n'y a rien à comprendre, c'est comme ça
c'est tout ???
--
Une Bévue

5 réponses

Avatar
ASM

j'ai une function toggle (qui déploie si non déployé et collège de
Sceau) shématiquement :

truc.style.display=(truc.style.display=='')? 'block' : '';

ça marche ezactement kom je voeux ;-)


truc.style.display=='' // truc n'a pas de display spécifique
// qui *ait été* décidé par *javascript*
// ou ... le display (en JS) de truc
// est vide, inexistant ...
//
// sera employé celui par défaut
// celui lié à la balise et son mode de display
// ou celui défini dans la FdS (les css)

c'est peut-être un truc où il n'y a rien à comprendre, c'est comme ça
c'est tout ???


Il faut juste comprendre qu'on cause en JavaScript ...
'truc.style' ne s'intéresse qu'aux styles de 'truc' définis via JS
(ceux en css gérant le normal et étant réputés acquis et fonctionnels)

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

Avatar
Elegie
Une Bévue wrote:

soit un noeud 'dd' dont le css est à :

dd {display: none;}

si je lis la ppté <mon dd>.style.display j'obtiens :

""


La propriété 'style' d'un objet refère à l'attribut HTML 'STYLE'
correspondant, et non au style "calculé" (computed style); si cet
attribut n'a pas été défini (par exemple parce que vous utilisez une
feuille de style), alors sa valeur sera vide.

Le computed style peut toutefois être retrouvé grâce à
currentStyle/getComputedStyle, que nous avons évoqué récemment, mais
dont le support reste limité à des navigateurs plus ou moins récents
(probablement tous les browsers modernes, à tester).


Cheers,
Elegie.

Avatar
ASM

Il faut juste comprendre qu'on cause en JavaScript ...
'truc.style' ne s'intéresse qu'aux styles de 'truc' définis via JS
(ceux en css gérant le normal et étant réputés acquis et fonctionnels)



Ha oui, j'ai oublié le cas

<p id="truc" style="display:none">

Elegie a corrigé le tir

et que je traduit grace à mon ignorance :
'style' dans une balise revient à javascripter
tout comme onclick, onkeyup et autres joyeusetés événementielles


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

Avatar
Elegie
Elegie wrote:

La propriété 'style' d'un objet refère à l'attribut HTML 'STYLE'
correspondant, et non au style "calculé" (computed style); si cet
attribut n'a pas été défini (par exemple parce que vous utilisez une
feuille de style), alors sa valeur sera vide.


Phrase un peu rapide, et vraiment mal fichue: je m'auto-corrige :)

La propriété 'style' est en fait une représentation de l'attribut STYLE
de l'élément HTML correspondant. Cette réprésentation prend la forme
d'un objet dont les propriétés sont alimentées à l'aide des valeurs CSS
décrites dans l'atribut STYLE. Si cet attribut n'est pas renseigné,
alors les propriétés de l'objet style seront laissées vides (ou leurs
équivalents '0' ou 'false').

Avatar
Thoraval Yvon
Elegie wrote:

La propriété 'style' d'un objet refère à l'attribut HTML 'STYLE'
correspondant, et non au style "calculé" (computed style); si cet
attribut n'a pas été défini (par exemple parce que vous utilisez une
feuille de style), alors sa valeur sera vide.


Phrase un peu rapide, et vraiment mal fichue: je m'auto-corrige :)

La propriété 'style' est en fait une représentation de l'attribut STYLE
de l'élément HTML correspondant. Cette réprésentation prend la forme
d'un objet dont les propriétés sont alimentées à l'aide des valeurs CSS
décrites dans l'atribut STYLE. Si cet attribut n'est pas renseigné,
alors les propriétés de l'objet style seront laissées vides (ou leurs
équivalents '0' ou 'false').




Ok, pigé le binz, d'ailleurs quand je regarde les css par le dom je ne
vois pas d'attribut style )))