DOMにアタッチされた後に画像にアクセスする方法

Question

ajaxリクエストでサイドにロードされた画像があります。 問題は、これらのすべての画像が異なるサイズを持ち、その一部だけが特別な幅と高さを持つ必要があることです。

これらの画像をdomに添付した後でサイズを変更する必要があります。私は彼らがこの部署につけられた後を意味します。

<div id="myID" class="justAClass"></div> 

DOMにアタッチされた後は、どのように画像にアクセスできますか？

以前、私は次のことを試みた：

if($('#myID .justaClassName img').attr('width') > 1000 
    && if($('#myID .justaClassName img').attr('height') <= 3000){ 
    $('#myID .justaClassName img').css({ 
     'width' : '200px', 
     'height' : '400px' 
    }); 
} 

Answer 1

あなたは、次のJavaScriptを使用して画像にアクセスすることができます

const images = document.querySelectorAll('#myID img') 

Answer 2

3つの可能な解決策は、次のとおりです。

1）を使用してCSS
2 ）jQueryで直接画像を選択
3）MutationObs erver

---

1）まず第一にCSSでスタイルの問題を解決しようとします。 max-widthとmax-heightプロパティを設定して、イメージをその親を含む親に制限することができます。

#myId img { 
    /* try different values here like your original 200 x 400 */ 
    max-width: 100%; 
    max-height: 100%; 
} 

2）ただし、これはすべての要件を満たしているとは限りません。あなたは画像のサイズ変更のための具体的な条件を述べました。これは幅が1000を超え、高さが< = 3000です。これより小さい画像を元のサイズに維持し、それより大きい画像を200 x 400にサイズ変更したいと思っています。

可能であれば、jQuery：$('#myID img')で画像を正しく選択して、コードを直接変更する必要があります。

3）ページを変更しているコードを制御しない場合は、MutationObserverにDOMの変更を監視するように設定できます。画像が変化するたびに、観察者はそのサイズを決定し、それに応じて調整することができる。

私が提案する解決策は、すべてのコードを制御しない場合に便利です。一部の画像は、編集できないスクリプトによって動的に読み込まれる場合があります。

var target = document.getElementById('myID'); 

var config = { 
    attributes: false, 
    childList: true, 
    characterData: false 
}; 

var observer = new MutationObserver(function(mutations) { 
    // the first image added to #myID 
    var img = mutations[0].addedNodes[0]; 

    if (img.width > 1000 && img.height <= 3000) { 
     img.width = 400; 
     img.height = 200; 
    } 
}); 

observer.observe(target, config); 

デモで一緒にすべてを置く

：

var doodles = [ 
 
    'https://www.google.com/logos/doodles/2017/freedom-day-and-enoch-sontonga-5748739204448256-2x.jpg', 
 
    'https://www.google.com/logos/doodles/2017/kings-day-2017-5641966854340608.15-2xa.gif', 
 
    'https://www.google.com/logos/doodles/2017/childrens-day-2017-mexico-5079016900919296-2x.png' 
 
]; 
 

 
window.onload = function() { 
 
    
 
    var target = document.getElementById('myID'); 
 
    
 
    var config = { 
 
     attributes: false, 
 
     childList: true, 
 
     characterData: true 
 
    }; 
 
    
 
    var observer = new MutationObserver(function (mutations) { 
 
     var img = mutations[0].addedNodes[0]; 
 
     if (img.width > 400 && img.height <= 3000) { 
 
      img.width = 400; 
 
      img.height = 200; 
 
     } 
 
    }); 
 
    
 
    observer.observe(target, config); 
 
    
 
    target.onclick = function() { 
 
     var r = Math.floor(Math.random() * doodles.length); 
 
     target.innerHTML = '<img src="' + doodles[r] + '">'; 
 
    }; 
 
};

#myID { 
 
    display: inline-block; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: solid black 3px; 
 
    border-style: dashed; 
 
    padding: 14px; 
 
    margin: 3px; 
 
} 
 

 
img { 
 
    border: solid black 1px; 
 
}

<div id="myID" class="justAClass">Click to Load</div>