ordre de priorité des proriétés avec multi css ?

[Michael REMY]

bonjour,

j'ai un problème (ou bug multi-navigateur...à voir)


voilà mes styles :

Code :

1
2
.contour{color:red;display:none;}
#truc1{font-size:10px;}

au départ, j'écris cela :
<div id="truc1" class="contour"></div>

là mon div est invisible c'est ok.
je fais ensuite cela :

Code :

document.getElementById('truc1').style.display='';

mon cadre reste invisible !! pourquoi ?

si je fais l'inverse ça marche bien (visible dans class et rendu invisible par Js)


encore plus étonnant, si j'écris cela :

Code :

<div id="truc1" class="contour" style="display:none;"></div>

et ensuite cela :

Code :

document.getElementById('truc1').style.display='';

bun là ça marche ! mon cadre redevient visible !

donc késako! ce problème ?

ya une priorité qui marche dans un sens mais pas dans l'autre !?
ça dépend de la déclaration du style en . ou en # ou en ligne dans le html ?

j'ai testé sous ie8 ff4 et chrome et opéra , tous ont le même bug/problème

[ornitho13]

si tu fais un :

Code :

document.getElementById('truc1').style.display='';

ton code html sera le suivant :

Code :

<div id="truc1" class="contour" style="display:;"></div>

donc ne sera pas interprété, donc le css :

Code :

1
2
.contour{color:red;display:none;}
#truc1{font-size:10px;}

sera pris en compte et donc ton cadre sera invisible.

Si tu utilises directrement le style inline :

Code :

<div id="truc1" class="contour" style="display:none;"></div>

ta div sera invisible et après action du javascript il sera visible car il n'y aura plus de display et donc cela equivaut à un display:block.

Dans tous les cas, utilise plutôt ceci :

Code :

document.getElementById('truc1').style.display='block';

pour faire apparaitre ton div et comme cela tu n'auras plus de problème entre du style inline ou provenant du fichier CSS