jQuery檢測，如果CSS類有背景圖像

我想檢測某個CSS類是否有應用於它的背景圖像。jQuery檢測，如果CSS類有背景圖像

我可以簡單地執行以下操作來測試一個背景圖像的存在：

if ($('.vc_custom_1498122672544').css('background-image') != 'none') { 
    alert('There is a background image'); 
}

然而上面的類是動態生成的，並且不會總是已知的。

將此類附加到它的div也應用了其他一些類。所以我嘗試以下操作：

if ($('.vc_row-has-fill').css('background-image') != 'none') { 
    alert('There is a background image'); 
}

這並不返回任何作爲背景圖像是專門針對該類.vc_custom_1498122672544而不是.vc_row-has-fill。

有什麼我可以做的，以檢測背景圖像與類.vc_row-has-fill？

來源

2017-06-22 danyo

有多少個元素會有'vc_custom'類？ – 31piy

這可能有助於https://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div - 認爲您需要使用'getComputedStyle'從樣式表中獲取css – Pete

其實你可以使用的方法從這個帖子： jquery -Get CSS properties values for a not yet applied class

的代碼有：

var getCSS = function (prop, fromClass) { 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass); 
    $("body").append($inspector); // add to DOM, in order to read the CSS property 
    try { 
     return $inspector.css(prop); 
    } finally { 
     $inspector.remove(); // and remove from DOM 
    } 
};

基本上你可以打電話getCSS('backgroundImage', ***A class to test for a background image***)並使用它來消除的方法。

這是否幫助你在你的情況？

來源

2017-06-22 09:35:03 hallleron

這不適合我抱歉！你可以發一個小提琴嗎？ – danyo

當然：http://jsfiddle.net/ruisoftware/65bHm/ - 這個小提琴是從上面的帖子。 – hallleron

如果你將它與一個循環結合起來，並且這個：https：//developer.mozilla.org/en-US/docs/Web/API/Element/classList - 你應該很好去;-) – hallleron

它應該理想地工作，但如果沒有，那麼你可以檢查類像vc_custom_1498122672544總是vc_custom_啓動，它總是設置背景有vc_row-has-fill類的元素，那麼你可以檢查元素是否具有與vc_custom開始像下面任何一類。

if($(".vc_row-has-fill").is("[class*='vc_custom_']")) 
{ 
    alert('There is a background image'); 
}

或者使用@hallleron發佈的鏈接中提到的函數，你可以檢查如下。

$(document).ready(function() { 
    function hasBackgroundImageSet(fromClass) { 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass); 
    $("body").append($inspector); 
    try { 
    return $inspector.css('background-image') != 'none'; 
    } finally { 
    $inspector.remove(); // and remove from DOM 
} 
}; 


var hasBg = $(".vc_row-has-fill").attr("class").split(" ").some(function(cls) { 
    return hasBackgroundImageSet(cls); 
    //return $("."+cls).css("background-image") != "none";//use this if not use above 
}); 

if(hasBg){ 
alert('There is a background image'); 
} 

});

來源

2017-06-22 09:38:42

實際上，你可以檢查一個類是否有另一個類。例如，類別爲.vc_row-has-fill的div具有類別.vc_custom_1498122672544或沒有。如果這樣做，那麼你可以進一步檢查類.vc_custom_1498122672544是否有background-image與否

$('.vc_row-has-fill').each(function(){ 
    if ($(this).hasClass('vc_custom_1498122672544')){ 
     if ($('.vc_custom_1498122672544').css('background-image') != 'none') { 
      alert('There is a background image'); 
     } 
    } 
});

演示：https://jsfiddle.net/9y52ef4c/

林不知道，這是否是你想要達到或不是。希望將有所幫助

來源

2017-06-22 09:45:33 Mark

不幸的是類「vc_custom_1498122672544 「將是未知的，因爲它是動態生成的。 – danyo

@danyo'unknown'是什麼意思？班級名稱會不斷變化嗎？ – Mark

因此，當在後端創建一個新元素時，自定義類將在運行中生成，並且因此未知。 – danyo

這是我想出的解決方案。我知道自定義類總是應用於div的第三類。非常簡單：

$('.vc_row-has-fill').each(function(){ 
    var classes = $(this).attr('class').split(' '); 
    var imgClass = classes[3]; 
    if ($('.' + imgClass).css('background-image') != 'none') { 
     alert('There is a background image'); 
    } 
});

來源

2017-06-22 10:22:15 danyo

jQuery檢測，如果CSS類有背景圖像

回答

相關問題