檢查背景顏色或圖像

我正在製作一個博客主題，它在作者發佈帖子時使用了精選圖像和特色的混合。我想讓腳本運行三件事：檢查背景顏色或圖像

檢查是否有精選圖片。如果是這樣，請使用它。
如果沒有特色圖片，是否有特色？如果是這樣，請使用它。
如果兩者均未設置，則生成隨機顏色。

我有JavaScript代碼在幾乎作品的片斷，我覺得有可能是我使用的if語句中的邏輯問題。

腳本

$(".post").each(function randomColor() { 
     var bgCol = $(".post").css('backgroundColor'); 
     if (bgCol != "rgb(0,0,0)" || (bgCol.attr('style').indexOf('image') !== -1)) { 
      var color = "#"+(Math.random()*0xFFFFFF<<0).toString(16); 
      $(this).css("background-color", color) 
     } 
     else { return } 
     });

我成立了一個jsFiddle to demonstrate the problem。它保留圖像，但如果設置了則覆蓋特色。

有關如何改進if循環的任何想法？

我有一個演示（非常稀疏）的blog theme，所以你可以看到我要去的東西。

來源

2014-09-01 Brian

'none'應該是什麼？ JavaScript中沒有這樣的關鍵字/本地值。你的意思是字符串文字'「無」'？ – 2014-09-01 01:47:42

CSS中的background-image的默認值（我以爲我正在檢查...）是'none'。 – Brian 2014-09-01 01:52:17

是的，但它是字符串值，而不是關鍵字。 '無！=「無」'。 – 2014-09-01 01:54:11

jsBin demo

我會檢查計算的樣式：

$(".post").each(function() { 
    var cs = window.getComputedStyle(this); 
    if (cs.backgroundImage==="none" && 
     cs.backgroundColor==="transparent" || 
     /0\)$/.test(cs.backgroundColor)) { 
    var color = "hsl("+ ~~(Math.random()*360) +",60%,70%)";  
    $(this).css("background-color", color); 
    } 
});

此行如果rgba值0 alpha透明度0)結束/0\)$/.test(cs.backgroundColor)只是測試（Webkit的返回RGBA（0，0， 0,0）而不是「透明」，這基本上是相同的）。

使用hsl()色調，飽和度，亮度（而不是十六進制#）會給你在隨機生成的顏色強度更多的控制權（這樣你就可以最適合它的通用網址亮度和感覺）。

來源

2014-09-01 01:59:54

冒着展示我的無知的風險，如果爲班級設置了** no **背景屬性，他們是否計算爲「透明」？我測試了這個，所有未定義的div都保持白色。 – Brian 2014-09-01 02:08:23

@BrianBennett你不是無知:)它只是我的一個壞習慣，不在Chrome中測試我的代碼:) brb給你很快修復 – 2014-09-01 02:11:02

它看起來像Chrome應用'rgba（0,0,0,0） '。我將不得不使用Safari來檢查它是否是Webkit的事情。 – Brian 2014-09-01 02:11:45

$(".post").each(function randomColor() { 
     var bgCol = $(".post").css('backgroundColor'); 
     console.log(bgCol); 
     if (bgCol == "rgba(0, 0, 0, 0)") { 
      var color = "#"+(Math.random()*0xFFFFFF<<0).toString(16); 
      $(this).css("background-color", color) 
     } 
     else { return } 
     });

下面是代碼，所有更改應用於CSS你只需要尋找沒有背景的元素，並生成隨機顏色。

來源

2014-09-01 02:02:39 PashaB

檢查背景顏色或圖像

回答

相關問題