检查背景颜色或图片。

Question

我正在制作一个博客主题，它在作者发布文章时使用特色图片和特色颜色的混合。我希望脚本可以运行以下三个步骤：

1. 检查是否有特色图片。如果有，则使用该图片。
2. 如果没有特色图片，则检查是否有特色颜色。如果有，则使用该颜色。
3. 如果两者都没有设置，则生成随机颜色。

我已经有了几行几乎可以工作的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演示问题。它保留了图片，但如果有特色颜色设置，则会覆盖它。 你有没有想法如何改进if循环？ 我有一个非常简洁的博客主题演示，让您可以看到我的意思。

- Brian

---

none 应该是什么？JavaScript 中并没有这样的关键字或本地值。您是否意味着字符串文字 "none"？ - Austin Brunkhorst

CSS中background-image的默认值（我以为我已经检查过了...）是none。 - Brian

是的，但它是字符串值，而不是关键字。none != "none"。 - Austin Brunkhorst

Answer 1

jsBin演示

我会检查计算样式：

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

这行代码 /0\)$/.test(cs.backgroundColor) 只是测试 rgba 值是否以 0 alpha 不透明度 0) 结尾（Webkit 返回 rgba(0, 0, 0, 0) 而不是"透明"，但它们基本上是一样的）。

使用 hsl() 色相、饱和度、亮度 （而不是十六进制 #）将使您对随机生成的颜色强度更加掌控（因此您可以最好地将其适应于网站的光线和感觉）。

- Roko C. Buljan

---

冒昧展示我的无知，如果类没有设置背景属性，它们会计算为“透明”吗？我测试了一下，所有未定义的div都保持白色。 - Brian

@BrianBennett 你并不无知 :) 只是我有一个坏习惯，从不在 Chrome 中测试我的代码 :) 待会儿会给你一个修复方案。 - Roko C. Buljan

看起来 Chrome 应用了 rgba(0,0,0,0)。我需要检查一下 Safari，看看这是不是 Webkit 的问题。 - Brian

@BrianBennett 没错，我正要测试，这里有一个快速修复方案：http://jsbin.com/cetuvo/2/edit - Roko C. Buljan

搞定了 :-) 我之前不熟悉 match 方法。谢谢！ - Brian

Answer 2

$(".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应用，你只需要查找没有背景的元素并生成随机颜色。

- PashaB