從img的div中獲取img寬度：z-index＆opacity是決定性因素

Question

我的頁面中有以下代碼。

<div id="divId"> 
    <img src="somePic0.png" style="z-index:10; opacity:0;"/> 
    <img src="somePic1.png" style="z-index:9; opacity:0;"/> 
    <img src="somePic2.png" style="z-index:8; opacity:1;"/> <!-- need the height of this! --> 
    <img src="somePic3.png" style="z-index:7; opacity:1;"/> 
    <img src="somePic4.png" style="z-index:6; opacity:1;"/> 
</div> 

我需要獲得行的img高度註釋！

想要一個jQuery解決方案，但普通的JavaScript是好的！

編輯：圖像屬性「不透明度」週期。它們都從1開始，然後逐漸下降到0.當它們全部達到零時，它們都被重新設置爲1。然後他們再次「倒數」。這個div的目的是循環背景圖像。

Answer 1

添加類每個節點，遍歷它們，然後收集相關你需要它的形成。

<div id="divId"> 
     <img class="node" src="somePic0.png" style="z-index:10; opacity:0;"/> 
     <img class="node" src="somePic1.png" style="z-index:9; opacity:0;"/> 
     <img class="node" src="somePic2.png" style="z-index:8; opacity:1;"/> 
     <img class="node" src="somePic3.png" style="z-index:7; opacity:1;"/> 
     <img class="node" src="somePic4.png" style="z-index:6; opacity:1;"/> 
    </div> 

    <script> 
     /** 
     * var collectNodes = document.getElementById('divId').children; 
     *  for <= IE8. (Thanks Kolink) 
     **/ 
     var collectNodes = document.getElementsByClassName('node'); 
     var y = 0; 
     for (var x = 0; x < collectNodes.length; x++) { 
      if (collectNodes[x].style.opacity !== "" && !y) { 
       y = x; 
      } 
     } 
     console.log (collectNodes[y].style.opacity); 
     console.log (collectNodes[y].height); 
    </script> 

的jsfiddle：http://jsfiddle.net/XHr3P/3/

Answer 2

如果圖像的立場是什麼定義它（例如，你希望第三圖像），試試這個：

var height = document.getElementById('divId').children[2].height; 

如果希望有一個8 z-index，試試這個：

var height = (function(c) { 
    var l = c.length, i; 
    for(i=0; i<l; i++) { 
     if(c[i].style.zIndex == 8) return c[i].height; 
    } 
})(document.getElementById('divId').children); 

如果你正在尋找的第一不透明圖像，試試這個：

var height = (function(c) { 
    var l = c.length, i; 
    for(i=0; i<l; i++) { 
     if(c[i].style.opacity == 1) return c[i].height; 
    } 
})(document.getElementById('divId').children); 

Answer 3

你不能添加CL屁股這些imgs？或ID？

如果沒有，你可以用jQuery做

$("img[src='" + nameofthe pic + "']").width() 

編輯：

，以獲得最高的z-index和透明度的寬度，你需要遍歷圖像和比較CSS得到你想要的，我認爲這會做的一個... ...

var z_index = 0; 
var $img; 

    $.each($("imgs selector"), function(i, e){ 
     if($(e).css("opacity") == 1){ 
      if ($(e).css("z-index") > z_index){ 
       z_index = $(e).css("z-index"); 
       $img = $(e); 
      } 

     } 
    }); 


    $img.width(); 

Answer 4

這裏是我的首選方式

var index = 2; 
var width; 
$("img").each(function(arg){ 
    if(index==arg){ 
     width = $(this).width(); 
    } 
}); 

這裏是小提琴 http://jsfiddle.net/UNPpL/2/

Answer 5

既然你說你寧願一個jQuery的解決方案，我會扔以一種方式使用jQuery來完成。我創建了一個小小的jQuery插件，它將返回不透明度設置爲1並具有最高z-index的元素。

(function($) { 
    $.fn.getHighestVisibleZ = function() { 
    var highestZ, $elm; 
    this.filter(function(){ 
     return $(this).css("opacity") === "1"; 
    }).each(function(){ 
     var z = parseInt($(this).css("zIndex"), 10); 
     if (!highestZ || highestZ < z) { 
      highestZ = z; 
      $elm = $(this); 
     } 
    }); 
    return $elm; 
    }; 
})(jQuery); 


// You could now use the plugin like so  
console.log($("#divId img").getHighestVisibleZ().width()); 

Working example

注意的z-index只適用於不是靜態的，所以這個工作您的圖像元素必須有靜態以外的位置。