2

記事のすべての画像を分析し、おそらく 400px より小さい/等しいすべての画像のクラス (および 400px より大きい画像の別のクラス) を設定して、特定のスタイルを与えることができるようにしたいと考えています。

jQueryでは、おそらくこのようなものになるでしょう

$('div#content').find('img').each(function () {
    var $this = $(this), width = $this.width();
     if (width <= 400) {
     $this.addClass('small_img');
}

var $this = $(this), width = $this.width();
    if (width > 400) {
    $this.addClass('large_img');
}       
});

しかし、純粋なJavascriptである必要があります。愚かなジャーナリストでありウェブデザイナーでもある私には理解できません。

4

4 に答える 4

4

このように速くて短いことを意味しますか？

window.onload = function() {
   var n=document.getElementById('content').getElementsByTagName('img'), 
       i=n.length;
   while(i--){
       n[i].className = n[i].clientWidth > 400 ? 'large_img' : 'small_img' ;
   }
};

実際の例については、このフィドルを参照してください。

（計算された）幅を取得する方法を選択するために、SOに関するこの質問もお読みください。

于 2012-08-14T14:40:47.597 に答える
3 
window.onload = function() {
   var content = document.getElementById('content');
   if (content) {
       var img = content.getElementsByTagName('img');
       for (var i = 0, count = img.length; i < count; i++) {
            if (img[i].offsetWidth <= 400) {
                img[i].className += ' small_img';
            } else {
                img[i].className += ' large_img';
            }
       }
   }
};
于 2012-08-14T14:41:07.027 に答える
1

このようなものが動作するはずです：

// Find the parent container 'div#content'
var container = document.getElementById( "content" ),
    // Find all images within the parent
    images = container.getElementsByTagName( "img" ),
    // Total number of images to check
    len = images.length,
    // Loop counter
    i = 0,
    // Represents the current image in the loop
    image;

// Loop through all the images
for ( ; i < len; i++ ) {
    // Access the current image
    image = images[ i ];

    // Use the ternary operator to assign one of two classes, based on width
    image.className += ( image.clientWidth > 400 ) ? " large_img" : " small_img";
}

それが役立つことを願っています。乾杯！

于 2012-08-14T14:41:14.997 に答える
1 
var contentDiv = document.getElementById('content');
var imgs = contentDiv.getElementsByTagName('img');
for(i=0;i<img.length;i++){
   var img = imgs[i];
   if(img.clientWidth <= 400) img.className += " small_img"
   else                       img.className += " large_img"
}
于 2012-08-14T14:42:35.350 に答える