2013-03-23 177 views
3

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

+0

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

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

+0

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

回答

0

您可以通過使用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> 
+0

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

4

你可以做到這一點,像這樣:

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; 
    } 
} 
+0

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

+0

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

2

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

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

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

0

這應該工作,不會重新一刀的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/

+0

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

+0

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

0

$("div:has(img)") 

,如果你使用jQuery

+0

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

+0

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

相關問題