2010-11-19 35 views
3
<html> 
<head> 
    <title>Sample</title> 

    <script> 
     window.onload = function() 
     { 
      alert(document.getElementById('div1').style.zIndex); 
      alert(document.getElementById('div2').style.zIndex); 
     } 
    </script> 

    <style type="text/css" media="screen"> 
     #div2 
     { 
      z-index: 1; 
     } 
    </style> 
</head> 
<body> 
    <div id="div1" style="z-index:1"></div> 
    <div id="div2"></div> 
</body> 

Impossible de définir le z-index via CSS

Le résultat du code ci-dessus est "1" pour la 1ère alerte, et rien pour le 2ème.

Comment se fait-il que je ne puisse pas définir l'index z de "div2" via CSS?

Merci.

Répondre

3

1: elle est définie, mais JS dévers déterminer si elle est pas mis en ligne
2: il would'nt d'effet, si l'objet est pas positionné (comme gulbrandr affiché)

concernant à 1. Si ce n'est pas s et inline (ou par javascript), vous pouvez le récupérer en utilisant currentStyle ou getComputedStyle ce qui vous donne le style actuellement appliqué.

+0

Donc vous dites que si je ne le fais pas manuellement avec javascript comme: style.zIndex = 1; ça ne marchera jamais? – denicio

+0

Non, cela fonctionne également si vous le définissez en ligne '

', c'est pourquoi vous obtenez la bonne valeur pour # div1 dans votre exemple. –

+0

Merci pour la réponse c'était le plus complet. Je ne comprends toujours pas pourquoi la co-op de CSS & Javascript est faite comme ça. Je veux dire le style en ligne et le style d'id devrait refléter la même chose. – denicio

2

De W3Schools.com:

z-index ne fonctionne que sur des éléments positionnés (position: absolu, position: relative ou position: fixed)

+0

Eh bien, même si j'ajoute position: absolute au style # de div2, j'ai le même résultat. – denicio

+0

Cela expliquerait pourquoi il ne s'appliquait pas, pas pourquoi il ne serait pas défini. – Quentin

1

Le .style.* ensemble de propriétés cartographiques directement sur les propriétés définies par l'styleattribut, et non ceux qui sont montés en cascade d'une feuille de style appropriée.

Pour trouver le z-index calculé, vous devez utiliser getComputedStyle