javascript - mouseoutでattr（）値を削除する方法

Question

マウスオーバー時の画像の高さと幅を設定するためにこのコードを使用しています

$('#gallery').find("img").attr('height', '20px');
$('#gallery').find("img").attr('width','20px');

//ここで、デフォルトの高さと幅は上記のjavascriptによって変更されます

マウスアウトするときに、マウスオーバーによって設定された画像の高さと幅を削除する方法

Answer 1

使用hover():

$('#gallery').hover(
    function(){
        // mouseover
        $(this).find("img").attr({'height':'20px', 'width':'20px'});
    },
    function(){
        // mouseout
        $(this).find('img').removeAttr('height').removeAttr('width');
        /* as of jQuery 1.7, it's possible to remove multiple attributes at once:
           $(this).removeAttr('height width'); */
    });

JS フィドルのデモ。

を使用した JS Fiddle デモ.removeAttr('height width')。

参考文献:

• hover().
• removeAttr().

Answer 2

デフォルトに戻す代わりに以前の値を復元するには、次のようにします。

$("#gallery").mouseenter(function() {
   var gallery = this;

   $("img", this).each(function() {
      var prev = {
        "width": $(this).attr("width"),
        "height": $(this).attr("height")
      };

      var img = this;

      $(gallery).one("mouseleave", function() {
        $(img).attr(prev);
      });
   }).attr({'height':'20px', 'width':'20px'});
});

これにより、他の画像と競合することなく、画像ごとに古い値が安全に保存されます。(各画像の最初のサイズが異なる場合でも.

http://jsfiddle.net/4bEfs/

Answer 3

マウスアウトで試してみてください $('#gallery').find("img").attr('height', 'auto'); $('#gallery').find("img").attr('width','auto');

Answer 4

属性を操作する場合は、 http ://api.jquery.com/hover/とhttp://api.jquery.com/removeAttr/を組み合わせて使用​​できます。

より柔軟な解決策は、http://api.jquery.com/css/を使用して css を操作することです。これにより、複数の値を同時に変更できます。

Answer 5

これを試してください：マウスオーバーで幅と高さを保存し、後でそれらを復元します。

    var storeddimensions;    
    $('#gallery').hover( 
        function() {
            storeddimensions = new Array($(this).find("img").height(), $(this).find("img").width());
            $(this).find("img").attr({'height':'20px', 'width':'20px'}); 
        }, 
        function() { 
            $(this).find("img").attr({'height':storeddimensions[0] + 'px', 'width':storeddimensions [1] + 'px'}); 
        }
    );