0

我的页面中有以下代码。

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

4

5 回答 5

0

如果图像的位置是它的定义（即你想要第三张图像），试试这个：

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

如果你想要一个z-index8 的，试试这个：

 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);
于 2013-03-07T14:48:16.913 回答
0

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

如果没有，你可以用 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();
于 2013-03-07T14:48:33.017 回答
0

向每个节点添加类，遍历它们，然后从中收集您需要的相关信息。

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

于 2013-03-07T14:51:06.030 回答
0

既然您说您更喜欢 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());

工作示例

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

于 2013-03-07T15:20:18.547 回答
-1

这是我的首选方式

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

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

于 2013-03-07T14:57:36.380 回答