Nhận chỉ mục z của DIV trong JavaScript?

Question

Tôi có một div normaldiv1 với lớp normaldiv. Tôi đang cố truy cập chỉ mục z của nó thông qua thuộc tính kiểu nhưng nó luôn trả về 0 mặc dù nó được đặt thành 2 trong biểu định kiểu.

CSS:

.normaldiv 
{ 
    width:120px; 
    height:50px; 
    background-color:Green; 
    position: absolute; 
    left: 25px; 
    top:20px; 
    display:block; 
    z-index:2; 
} 

'

HTML:

<div id="normaldiv1" 
    class="normaldiv" 
    newtag="new" 
    tagtype="normaldiv1" 
    onmousedown="DivMouseDown(this.id);" 
    ondblclick="EditCollabobaTag(this.id,1);" 
    onclick="GetCollabobaTagMenu(this.id);" 
    onblur="RemoveCollabobaTagMenu(this.id);"> 

JavaScript:

alert(document.getElementById('normaldiv1').style.zIndex); 

Làm thế nào tôi có thể tìm thấy z-index của một phần tử sử dụng JavaScript?

Answer 1

Vì chỉ mục z được đề cập trong phần CSS, bạn sẽ không thể lấy trực tiếp thông qua mã mà bạn đã đề cập. Bạn có thể sử dụng ví dụ sau.

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; 
} 

chuyển thuộc tính id và thuộc tính thành phần của bạn để truy cập chức năng.

Ví dụ:

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

Đối với firefox bạn phải vượt qua z-index thay vì ZIndex

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

Reference

Answer 2

thử này

window.getZIndex = function (e) {  
    var z = window.document.defaultView.getComputedStyle(e).getPropertyValue('z-index'); 
    if (isNaN(z)) return window.getZIndex(e.parentNode); 
    return z; 
}; 

sử dụng

var myZIndex = window.getZIndex($('#myelementid')[0]); 

(nếu cha mẹ bị để nhổ tận gốc nó sẽ trở lại 0)