0

私は自分のウェブページにdiv内のいくつかの画像を表示しています。divと画像はループで動的に作成されます。

このようなIDを使用せずにjqueryを使用して各画像の幅と高さを取得する必要があります

 document.getElementById('Image/div id');

ループによって動的に作成される画像は条件に応じて多くなるため、ユーザーが画像にカーソルを合わせたりクリックしたりしたときに画像の高さと幅を取得する方法はありますか？

私は長い間これにぶつかり、ここに来てようやく解決策が得られることを願っています

4

5 に答える 5

2

この情報をページに表示したい場合は、次のことをお勧めします。

$('img').hover(
    function(){
        var h = $(this).height(),
            w = $(this).width();
        $('<div />').insertAfter($(this)).text('height: ' + h + '; width: ' + w +'.');
    },
    function(){
        $(this).next('div').remove();
    });

JSフィドルデモ。

$(this)CSSへの呼び出しを減らし、 CSSに結合することで、少しきれいにするためのほとんど無意味な編集：

$('img').hover(
    function(){
        var that = $(this),
            h = that.height(),
            w = that.width();
        $('<div />')
            .css('width',w)
            .text('height: ' + h + '; width: ' + w +'.')
            .insertAfter(that);
    },
    function(){
        $(this).next('div').remove();
    });​

CSS：

div {
    display: block;
    position: relative;
}

div > div {
    position: absolute;
    top: 0;
    left: 0;
    color: #f90;
    background-color: #000;
    background-color: rgba(0,0,0,0.6);
}

JSFiddle デモ。

jQueryはこの効果には実際には必要ないため（実装は単純化されますが）、編集されました。つまり、単純なJavaScriptの代替手段です。

var img = document.getElementsByTagName('img');

for (var i=0,len=img.length;i<len;i++){
    img[i].onmouseover = function(){
        var that = this,
            h = that.offsetHeight,
            w = that.offsetWidth,
            p = that.parentNode,
            d = document.createElement('div');
        d.style.width = w + 'px';
        d.textContent = 'Width: ' + w + '; height: ' + h + '.';
        p.appendChild(d);

    };
    img[i].onmouseout = function(){
        var that = this;
        that.parentNode.removeChild(that.nextSibling);
    };
}​

JSFiddle デモ。

最終編集（私は思う）、の互換性を思い出せなかったので、node.textContentこの修正はIEの下位バージョンとの互換性を助けるかもしれないと思った（/などdocument.createTextNode()に依存する代わりに使用する...）：node.textContentnode.innerText

var img = document.getElementsByTagName('img');

for (var i=0,len=img.length;i<len;i++){
    img[i].onmouseover = function(){
        var that = this,
            h = that.offsetHeight,
            w = that.offsetWidth,
            p = that.parentNode,
            d = document.createElement('div'),
            text = document.createTextNode('Width: ' + w + '; height: ' + h + '.');
        d.appendChild(text);
        d.style.width = w + 'px';
        p.appendChild(d);

    };
    img[i].onmouseout = function(){
        var that = this;
        that.parentNode.removeChild(that.nextSibling);
    };
}​

JSFiddle デモ。

私はIE7以下を持っていませんが、上記は少なくともIE8では機能します。IE 6または7の機能についてコメントがあれば、興味があります。

参照：

于 2012-04-18T09:59:25.303 に答える
2

jQueryを使用on()して、ハンドラーを最も近い共通の親コンテナーにアタッチできます。そうすれば、少なくともこの機能を有効にする画像のサブセットを制御できます。

$('#container').on('mouseover','img',function(){
    var width = $(this).width();
    var height = $(this).height();
});

お気に入り：

<div>
    <img> //will not affect this one since it's not under "#container"
</div>
<div id="container">
   <img> //the handler affects this one
   <div>
      <img> //the handler also affects this one
   </div>
</div>
于 2012-04-18T10:03:08.110 に答える
0

これで問題は解決しますか？

$('img').hover(function() {
  console.log($(this).width());
  console.log($(this).height());
});
于 2012-04-18T09:57:58.270 に答える
0

$(this)ホバーされている画像を参照するために使用します。

$("#div_id").hover(function(){
  alert("H:" + $(this).height() + " W:" + $(this).width() );
});
于 2012-04-18T09:59:12.810 に答える
0 
$(".img").mouseover(function() {

    var $div = $(this);
    var $item = $div.find("img");

    var width = $item.width();
    var height = $item.height();
}

これを試して。

于 2012-04-18T10:21:42.050 に答える