如何檢查div包含哪個背景圖片？

我有一個div標籤，可以包含我擁有的3張圖像中的一張。 Imagea，Imageb和ImageC作爲背景。如何檢查div包含哪個背景圖片？

我想要做的是寫一個if語句來檢查div是否包含背景圖片。

var myDiv = document.getElementById("divtag1"); 
    if(myDiv.style.backgroundImage == "url('images/plane.png')") { 
     // Doing something 
    }

這似乎並不工作，任何幫助表示歡迎。

來源

2016-03-02 Henry

你只是缺少一個東西。您正在查看myDiv是否等於您提供的字符串。這不可能是真的，因爲myDiv是一個對象。只需使用myDiv.style.backgroundImage。 – Megajin

嗨，對不起。我編輯了我的問題。我不知道我是如何錯過的。 – Henry

您是使用CSS填充背景圖片還是使用「SRC」屬性？您是否嘗試使用'==='而不是'=='？ – Megajin

如果你想使用JQuery的

var background = $('.element').css('background-image') 
 
if (background.indexOf("placehold.it/350x150") >= 0) { 
 
    $('.element').css('border', '5px solid black'); 
 
}

.element { 
 
    background-image: url('http://placehold.it/350x150'); 
 
    width: 350px; 
 
    height: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element"></div>

來源

2016-03-02 15:20:00

嗨，我不太確定我如何在我的代碼中適應這一點。我從來沒有使用過jQuery，我寫的代碼是完整的js。 – Henry

你只需要在其他js代碼之前在你的項目中包含JQuery https://jsfiddle.net/Lg0wyt9u/117/ –

謝謝。這工作，也很短:) – Henry

我沒有測試此代碼，所以你可能需要用它來搗鼓一下，但檢查的背景圖像，你會做這樣的事情：

if (myDiv.style.backgroundImage == "url('images/plane.png')") 
{ 
    //DO SOMETHING. 
}

來源

2016-03-02 15:16:04

嗨，這是行不通的。 – Henry

您希望.style財產。我不認爲你需要.getComputedStyle()，但我也會鏈接到。

因此，像：

var myDiv = document.getElementById("divtag1"); 
if(myDiv.style.backgroundImage === "url('images/plane.png')") { 
    // Doing something 
}

來源

2016-03-02 15:16:40 romellem

嗨，這是行不通的。 – Henry

myDiv.style.backgroundImage在第一個地方等於什麼？運行'console.log（myDiv.style.backgroundImage）;'讓我們知道它吐出了什麼。 – romellem

這裏你們去。如果你不希望使用正則表達式，而不是if(imgtest.test(backgroundimage))你也可以使用if(backgroundimage.indexOf('lion') > -1)

var lion = document.getElementById('lion'); 
 
var backgroundimage = window.getComputedStyle(lion).backgroundImage; 
 
console.log(backgroundimage) 
 

 
var imgtest = /lion/i; //regex to test for whatever string you need 
 

 
if (imgtest.test(backgroundimage)) { 
 
    console.log("Yes, this is a lion.") 
 
}

#lion { 
 
    background: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg); 
 
    background-size: contain; 
 
    width: 500px; 
 
    height: 357px; 
 
}

<div id="lion"></div>

來源

2016-03-02 15:42:13 jmcgriz

如何檢查div包含哪個背景圖片？

回答

相關問題