Javascript 从充满img的div中获取img宽度：z索引和不透明度是决定因素

我的页面中有以下代码

<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的目的是循环背景图像。

如果图像的位置是定义它的位置，即，您想要第三个图像，请尝试以下操作：

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

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

如果您想要z索引为8的，请尝试以下操作：

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

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

如果要查找第一张不透明图像，请尝试以下操作：

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

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

---

你不能给那些IMG添加一个类吗？还是身份证

如果没有，您可以使用jQuery来完成

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

编辑：

要获得最高z索引的宽度和不透明度，您需要对图像进行迭代，并比较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();

---

向每个节点添加类，对它们进行迭代，然后从中收集所需的相关信息

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

---

jshiddle:

这是我喜欢的方式

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

这是小提琴

---

既然您说您更喜欢jQuery解决方案，我就用jQuery提供一种方法。我创建了一个小小的jQuery插件，它将返回不透明度设置为1且z索引最高的元素

(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());

---

请注意，z索引仅适用于非静态的元素，因此要使其正常工作，您的图像必须具有非静态的位置。

我可以这样做，但如何获得最高z索引且不透明度为1的img的img宽度？啊，抱歉，不是100%清楚：不透明度循环。所以当他们都变为0时，他们都变为1，然后他们又逐渐倒计时到0！我会试试这个然后回来！IE8及以下版本不支持GetElementsByCassName，在本例中是完全冗余的，因为document.getElementById'divId'。子节点将获得完全相同的节点。我做了一些更改，但是你让我走上了正确的道路谢谢：你确实意识到你喜欢的方式是一种漫长而复杂的方式，只需要做width=document.getElementsByTagName'img'[index].width；，对吗？不完全是，我所说的索引不是指img元素序列，img源名为index可以是随机的，比如somePic1.png，somePic5.png，somePic0.png