Javascript - 如何檢查一個元素是否包含圖像？

任何人都可以建議如何檢查一個元素是否包含圖像？我假設它是否包含圖像源，但我不確定如何對其進行編碼。Javascript - 如何檢查一個元素是否包含圖像？

2013-03-23 jord49

我假設你正在談論的''標籤（而不是一個CSS背景圖像）。正確？就像你想看看這個div是否有img標籤：'

'？ – 2013-03-23 20:55:59

多數民衆贊成是的是的 – jord49 2013-03-23 20:57:28

您可以通過使用js getElementById來獲取圖像元素，然後您可以輕鬆訪問該圖像的src，它告訴您天氣元素包含圖像，如果src不爲空或者包含圖像，那麼src應該有圖像路徑。

<html> 
    <head> 
    <script> 
    function myFunction() 
    { 
    var imgSrc = document.getElementById("myImg").attr('src'); 
    alert(imgSrc); 
    } 
    </script> 
    </head> 

    <body> 

    <h1>My Web Page</h1> 

    <p id="demo">A Paragraph</p> 

    <img id="myImg" src="http://www.blah.com/img.jpg" onclick="myFunction()"></img> 

    </body> 

</html>

來源

2013-03-23 21:05:25 Amol

我認爲這是即時通訊之後。我會放棄這一點。謝謝！ – jord49 2013-03-23 21:08:20

你可以做到這一點，像這樣：

if(elem.getElementsByTagName('img').length > 0) { 
    // there is an image 
}

編輯：看到您的評論後，試試這個：

var imgs = elem.getElementsByTagName('img'), len = imgs.length, i; 
for(i=0; i<len; i++) { 
    if(imgs[i].src.match(/\/image\.jpg$/)) { 
     // the image is there 
     break; 
    } 
}

來源

2013-03-23 20:58:13

謝謝你。我應該更具體，雖然我想看看它是否包含特定的圖像。例如，我的元素是否包含image.jpg。我給了我的圖片一個id是否可以檢查一個id是否存在？ – jord49 2013-03-23 21:04:10

查看編輯答案。 – 2013-03-23 21:06:06

如果您正在使用jQuery你可以做這樣的事情：

if($('#container_id').find('img').length > 0) { 
    // Image found on container with id "container_id" 
}

來源

2013-03-23 20:59:14 Ifnot

不幸的是，我必須爲此使用Javascript。雖然謝謝，但結構很有用。 – jord49 2013-03-23 21:05:13

這應該工作，不會重新一刀的JQuery一樣Anael的解決方案：

<div id="test1"><img src="img.jpg" /></div> 
<div id="test2">Hello</div>  

<script> 
function hasImage(id) { 
    var childElements = document.getElementById(id).childNodes; 
    for (var i = 0; i < childElements.length; i++) { 
     if (childElements[i].localName != null && childElements[i].localName.toLowerCase() == "img") { 
      return true; 
     } 
    } 
    return false; 
} 

alert(hasImage('test1')); // true 
alert(hasImage('test2')); // false 
</script>

演示時的jsfiddle：http://jsfiddle.net/qLPJC/

更新：

要查看它是否有一個具體的src試試這個更新：

function hasImage(id) { 
    var childElements = document.getElementById(id).childNodes; 
    for (var i = 0; i < childElements.length; i++) { 
     if (childElements[i].localName != null && childElements[i].localName.toLowerCase() == "img") { 
      if (childElements[i].getAttribute('src') != null && childElements[i].getAttribute('src').toLowerCase() == "img.jpg") { 
       return true; 
      } 
     } 
    } 
    return false; 
} 

alert(hasImage('test1')); 
alert(hasImage('test2'));

更新JS提琴例如：http://jsfiddle.net/qLPJC/2/

來源

2013-03-23 21:03:36

非常感謝生病讓它一去。 – jord49 2013-03-23 21:12:19

localName已過時https://developer.mozilla.org/en-US/docs/Web/API/Node/localName – mcgraw 2016-07-06 12:59:05

像

$("div:has(img)")

，如果你使用jQuery

來源

2013-03-23 21:10:57 lbdm44

他已經表示他不使用JQuery ... – 2013-03-23 21:11:17

謝謝，但我不得不使用javascript。 – jord49 2013-03-23 21:13:21

Javascript - 如何檢查一個元素是否包含圖像？

回答

相關問題