jQuery：每個IMG的大小相乘

我想保留originalWidth和originalHeight屬性中每個IMG寬度和高度的副本。如何稍後使用它們將每個IMG的新大小設置爲originalWidth * k，originalHeight * k？我想我應該使用lambdas或類似的東西，但沒有想法如何編寫表達式，因爲我是JS的新手。jQuery：每個IMG的大小相乘

$("//img[@attrName='value']").style = ???? ;

來源

2011-09-09 noober

我會做這樣的事情（工作jsFiddle example here）：

// To store the height and width of each image as data: 
$('img').each(function() { 
    $elem = $(this); 
    $elem.data({ 
     'origHeight': $elem.height(), 
     'origWidth': $elem.width() 
    }); 
}); 

// To set the size of each image based on a multiplier "new_size": 
function resize_images(new_size) { 
    $('img').each(function() { 
     $elem = $(this); 
     $elem.height($elem.data('origHeight') * new_size); 
     $elem.width ($elem.data('origWidth') * new_size); 
    }); 
}

來源

2011-09-09 10:21:04

您將需要使用.each()併爲每個圖像做分開。

$("img[attrName='value']").each(function() { ... do stuff .... });

來源

2011-09-09 09:47:02

謝謝你，佩卡。但是，「做什麼」可以看起來像什麼？ a => a.Width * = k？ – noober

@noober你可以使用'$（this）.width（）'來訪問函數中每個圖像的寬度（高度也一樣） –

你可以使用data()方法

$("img").each(function() { 
    $(this).data({ 
     "width": $(this).width(), 
     "height": $(this).height() 
    }); 
});

來源

2011-09-09 09:50:18 peirix

var multiply_by = 2; // example 

$("img[attrName='value']").each(function() { 

    // set multiplied width and height 
    $(this).width($(this).width() * multiply_by) 
      .height($(this).height() * multiply_by); 

});

來源

2011-09-09 09:51:09 binarious

你有沒有考慮過使用$.data存儲它們？或者，如果您真的需要自定義，甚至可以讀取HTML5 data-*自定義屬性。

然後你就可以在Java中，LILE寫一些UTIL FUNC：

function imgResize($img, k){ 
    var w = $img.data('originalWidth'), 
     h = $img.data('originalHeight'); 
    $img.width(w*k).height(h*k); 
}

來源

2011-09-09 09:52:01

如果你想要做的是獲取您的自定義屬性，並用它們來設置一個新的大小爲您的圖片，然後通過：

var k = 2; //double the size of the image 
var origW = parseInt($("img").attr("originalWidth")); 
var origH = parseInt($("img").attr("originalHeight")); 

$("img").css("width", origW*k); 
$("img").css("height", origH*k); 
// or 
$("img").attr("width",origW*k); 
$("img").attr("height",origH*k);

來源

2011-09-09 09:54:55 Ali

jQuery：每個IMG的大小相乘

回答

相關問題