检查元素是否具有纯JS的背景图像?

时间:2014-08-07 19:18:21

标签: javascript html css dom

在纯Javascript中检查特定元素是否与background-image相关联的正确方法是什么?

现在我有这个:

var elementComputedStyle = window.getComputedStyle(element); 
var hasBGImage = elementComputedStyle.getPropertyValue('background-image') !== 'none'

3 个答案:

答案 0 :(得分:2)

你有什么工作,但有其他方法可以找到你可能更容易找到的属性。我不相信有一个正确的'然而,这样做的方式。

只是javascript:

var hasBGImage = element.style.backgroundImage !== '';

使用jQuery:

var hasBGImage = $(element).css('background-image') !== 'none';

答案 1 :(得分:0)

确保声明背景图像为“inline”,否则.style.backgroundImage将无效。

<script>
window.onload=function() {
    var bg = document.getElementById('el').style.backgroundImage.length!=0;
    alert(bg);
}
</script>
<div id='el' style="background-image: url('a.jpg');"></div>

如果你可以使用内联CSS,那就是这样。如果由于某种原因你不能使用它,请告诉我,我会尝试找出其他的东西:)

答案 2 :(得分:0)

我在上一个项目中使用了此代码,并且效果很好

    // Check all background images exists
var imageURLs = $('.image-container ');
imageURLs.each(function(index, element){
    var imageURL = $(element).css('background-image').replace('url("', '').replace('")', '');
    var img = new Image();
    img.onerror = function() { $(element).css('background-image','url(/build/images/missing-image.svg)'); };
    img.src = imageURL;
});