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

各ノードにクラスを追加し、それらを反復処理してから、必要な関連情報を収集します。

    <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 を使用してそれを行う方法を 1 つ紹介します。1不透明度が設定され、最高の z-index を持つ要素を返す小さな jQuery プラグインを作成しました。

(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 に答える
0

画像の位置がそれを定義するものである場合 (つまり、3 番目の画像が必要な場合)、これを試してください。

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

これらの 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();
于 2013-03-07T14:48:33.017 に答える
-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 に答える