如何在訪問DOM後訪問圖像

Question

有圖像通過ajax請求加載到側面。 問題是，所有這些圖像有不同的大小，只是其中一些需要有一個特殊的寬度和高度。

我需要更改這些圖像附加到dom後的大小。我的意思是在他們被附加到這個div之後。

<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

三種可能的解決方案如下：

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>