6

É possível saber o z-index de um elemento sem posição defenida usando javascript?

Por exemplo neste código:

CSS

#exemplo1 {
    z-index:4;
}
#exemplo2 {
    z-index:4;
    position: relative;
}

HTML

<div id="exemplo1"></div>
<div id="exemplo2"></div>

É possível obter o z-index do exemplo1, neste caso 4, ainda que a position não esteja defenida?

O que eu testei:

var e1 = document.getElementById('exemplo1');
var e2 = document.getElementById('exemplo2');
console.log(e1.style.zIndex); // nada
console.log(e2.style.zIndex); // nada
console.log(window.getComputedStyle(e1).getPropertyValue("z-index")); // auto no Chrome, 4 no IE11 e FF
console.log(window.getComputedStyle(e2).getPropertyValue("z-index")); // 4

jsFiddle

3
  • Se o computed style está retornando auto, é porque a engine de renderização não vai considerar o z-index para esse elemento (não vai mudar seu índice z, nem criar um novo contexto de empilhamento). Nesse caso, qual a utilidade de se obter o valor tal como definido no CSS?
    – mgibsonbr
    24/03/2014 às 21:08
  • @mgibsonbr, o curioso é que o IE11 e o FF retornam 4 mas o Chrome retorna auto. O que eu procuro é uma maneira uniforme/consistente para isto.
    – Sergio
    24/03/2014 às 21:34
  • Isso é um bug que afeta todos webkit. Está documentado, mas ainda com status não confirmado: bugs.webkit.org/show_bug.cgi?id=122416
    – user3813
    25/03/2014 às 3:07

1 Resposta 1

2

Minha única sugestão é trocar momentaneamente a posição do seu elemento para relative, observar o z-index, e depois voltar a posição ao que era antes:

var pos = e1.style.position;
e1.style.position = "relative";
console.log(window.getComputedStyle(e1).getPropertyValue("z-index"));
e1.style.position = pos;

Exemplo. Como a execução de JavaScript na página principal é síncrona, isso não vai causar nenhum glitch visual.

7
  • Também pensei nesta solução mas não tenho a certeza que browsers diferentes leiam a ausência de position de forma consistente. Vou dar uma olhada... entretanto: +1
    – Sergio
    24/03/2014 às 21:23
  • Usando só var pos = e1.style.position; não chega... jsfiddle.net/8XKXk
    – Sergio
    24/03/2014 às 21:30
  • @Sergio Você não entendeu, eu leio essa posição só pra reatribuí-la depois da leitura do z-index (pois quero que fique igual a antes), mas ela não corresponde necessariamente à posição computada. E quanto ao comportamento de browsers diferentes, eles têm que retornar o z-index correto, de acordo com a especificação. Se não o fazem, é um bug. Ver essa pergunta relacionada.
    – mgibsonbr
    24/03/2014 às 21:39
  • Ok, estou a ver, para "enganar" o browser. Sim de facto esse modelo não deixa rasto. Obrigado!
    – Sergio
    24/03/2014 às 21:47
  • 1
    Já agora, se tiver alguma ideia para os IEs sem getComputedStyle junte aqui. Eu vou procurar também.
    – Sergio
    24/03/2014 às 22:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .