检查一个元素是否有纯JS的背景图像

Check if an element has a background-image with pure JS?

本文关键字：JS 图像 背景 是否 元素 一个 检查      更新时间：2023-09-26

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

现在我有这个:

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

您的方法可以工作，但是还有其他方法可以更容易地找到该属性。然而，我不相信有一个单一的"正确"的方法来做这件事。

javascript: 

var hasBGImage = element.style.backgroundImage !== '';
使用jQuery: 

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

务必声明背景图像为"inline"，否则为。style。backgrounimage不起作用。

<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，这就是方法。如果，由于某种原因，你不能使用它，告诉我，我会尝试找到其他的:)

我在上一个项目中使用了这个代码，并且工作完美

    // 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;
});
相关文章：