web-dev-qa-db-fra.com

Qu'est-ce que le z-Index par défaut de l'élément <div> en HTML et comment l'obtenir en utilisant JavaScript?

Donc, normalement, nous pouvons obtenir la valeur z-Index d'un élément div en utilisant, par exemple:

var zindex = document.getElementById('id').style.zIndex;

J'utilise cette valeur dans mon code pour faire quelque chose. Maintenant, le problème est avec les valeurs par défaut où il n'y a rien de défini dans le code HTML (ou même dans les cas où z-Index est défini dans les css externes), la même Java ne renvoie rien.

Je comprends que dans le cas par défaut, normalement le navigateur décide du rendu en fonction de la pile d'éléments. Mais y a-t-il une valeur spécifique ou un moyen de réaliser cela en JavaScript qu'il n'y a pas de valeur définie ??

Je veux dire, normalement rien retourné signifierait qu'aucune valeur n'est définie. Mais il est également arrivé avec des CSS externes, alors comment puis-je distinguer les deux ??

javascriptcssz-index
31
Johnydep

Vous pouvez essayer window.getComputedStyle () sur l'élément:

https://developer.mozilla.org/en/DOM/window.getComputedStyle

var e = document.getElementById('mydiv');
var value = window.getComputedStyle(e[0], null)['zIndex']

J'ai obtenu ces valeurs: "auto", "10". Après modification: z-index: 10, position: relative.

13
Gringo Suave

Par défaut z-index de tout élément est 'auto' à l'exception de <html> qui a par défaut z-index:0. 'Auto' signifie que l'élément obtient l'index z de son parent.

Vous pouvez le voir en utilisant les outils de développement (dans Chrome) ou tout autre outil similaire dans un autre navigateur. Vous pouvez également obtenir cela dans votre code en window.getComputedStyle () comme d'autres l'ont proposé ici.

34
Konstantin Smolyanin

Je crois que tout est z-indexé à 0. Vraiment z-index n'est valide que si vous le définissez pour tous les éléments qui vous intéressent. Vous pouvez définir le z-index d'un div à 100 000, mais cela n'aura pas d'importance si vous ne définissez pas le z-index de l'autre élément que vous essayez de chevaucher.

Donc, je suppose que ce que j'essaie de dire, c'est que le z-index par défaut du div n'a pas d'importance, il n'est calculé que si vous le définissez.

Un div à l'intérieur d'un div n'a pas d'index z spécifique. Un div div à l'intérieur d'un div à l'intérieur du corps à l'intérieur d'un iframe, à l'intérieur de 3 divs supplémentaires et d'une table, n'a pas d'index z (ou d'index z calculé).

Je ne vois pas qu'il y aurait une raison pratique d'essayer de trouver un z-index d'un élément, si ce n'est pas pertinent de toute façon.

5
Kelly Elton

@ Konstantin-Smolyanin

Auto 'signifie que l'élément obtient l'index z de son parent.

Non, ce n'est pas le cas - "hériter" signifie que l'élément obtient son 'z-index de son' parent.

Lorsqu'aucune propriété z-index n'est spécifiée, les éléments sont rendus sur la couche de rendu par défaut 0 (zéro).

2
Neil

Jetez un œil à cette question: Obtenir le z-index d'un DIV en JavaScript? :

Étant donné que l'index z est mentionné dans la partie CSS, vous ne pourrez pas l'obtenir directement via le code que vous avez mentionné. Vous pouvez utiliser l'exemple suivant.

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);

    if (window.getComputedStyle)
    {
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    }  
    else if (x.currentStyle)
    {
        var y = x.currentStyle[styleProp];
    }                     

    return y;
}

passez votre identifiant d'élément et votre attribut de style pour accéder à la fonction.

Par exemple:

var zInd = getStyle ( "normaldiv1" , "zIndex" );
alert ( zInd );

Pour Firefox, vous devez passer z-index au lieu de zIndex 

var zInd = getStyle ( "normaldiv1" , "z-index" );
 alert ( zInd );

Référence

Tu dois utiliser z-index pour Chrome également.

2
Korvin Szanto

Vous vous méprenez sur la signification de la propriété "style" des éléments. En référant element.style, ce que vous récupérez réellement est le style en ligne des éléments. Par exemple:

var el = document.getElementById('myEl');

console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>

et pour obtenir la valeur de votre style css (il peut s'agir d'une balise code va ici ou d'une feuille de style externe), vous devez vérifier si la méthode standard (window.getComputedStyle) est prise en charge ou non, sinon vous devez vérifier la version spécifique d'Internet Explorer. Vous pouvez le faire en vous référant à el.currentStyle.

Résumé:

to get inline style: var zIndex = el.style.zIndex

to get stylesheet value or style tag value:

    standard method: var zIndex = window.getComputedStyle(el,null).getPropertyValue('z-index');

    ie method: var zIndex = el.currentStyle['z-index'];
0
orustam