Question

我正在制作一个博客主题，当作者发布他们的帖子时，它会使用特色图片和特色的混合物。我想让脚本经历三件事：

检查是否有特色图片。如果是这样，请使用它。
如果没有精选图片，是否有特色？如果是这样，请使用它。
如果两者均未设置，则生成随机颜色。

我有一段几乎的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的演示（非常稀疏），所以你可以看到我想要的东西。

Answer 1

<强> 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);   
  }
});

这一行/0\)$/.test(cs.backgroundColor)只测试rgba值是否以0 alpha不透明0)结尾（Webkit返回rgba（0,0,0,0）而不是＆＃34;透明＆＃34;基本相同）。

使用hsl() 色调，饱和度，亮度（而不是十六进制#）将让您更好地控制随机生成的颜色强度（因此您最适合它一般网站的轻盈和感觉）。

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应用的所有更改都需要查找没有背景的元素并生成随机颜色。

检查背景颜色或图像

2 个答案: