Question

我有一个div标签，可以包含我拥有的3张图片中的1张。 Imagea，Imageb和ImageC作为背景。

我想做的是写一个if语句来检查div是否包含背景图像。

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

这似乎不起作用，欢迎任何帮助。

Answer 1

如果您想使用 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>

Answer 2

我没有测试过这段代码，所以你可能需要稍微调整一下，但要查看背景图片，你会做一些类似的事情：

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

Answer 3

您需要.style属性。我认为你不需要.getComputedStyle()，但我也会链接到这一点。

类似于：

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

Answer 4

你们走了。如果您不想使用正则表达式，而不是if(imgtest.test(backgroundimage))，您也可以使用if(backgroundimage.indexOf('lion') > -1)

＆＃13;

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.")
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如何检查哪个背景图像div包含？

4 个答案: