在浏览器控制台中使用 JavaScript 将颜色代码更改为另一种颜色代码

Question

我是一名网页设计师。

当我浏览网站时，我喜欢改变一些颜色，看看当我改变原色时网站的显示效果。

我使用“检查元素”来执行此操作。但这是非常耗时的工作，因为我需要添加大量代码才能到处更改。

是否有任何 JavaScript 代码可用于使用浏览器控制台将一种颜色代码更改为另一种颜色代码。

基本上我想要的是下面的......

使用浏览器控制台将本站点中所有位置的 #FFF8DC 颜色更改为 #e6dfc6 颜色。

Answer 1

原则

正如 Kaiido 评论的那样：“.getComputedStyle() 应始终以 rgb(nnn, nnn, nnn) 或 rgba(nnn, nnn, nnn, n) 的格式返回计算值”。

因此，在遍历所有元素计算的样式属性并替换适用的颜色值之后，不应该做太多事情。

我的更新

• 由于您希望能够“将#FFF8DC 颜色更改为#e6dfc6 颜色”，我修改了此solution (RGB to Hex and Hex to RGB) 中的函数，以便能够在我的sn-p，
• 修改了我的函数，使其适用于包含多种颜色（例如渐变）的属性值，
• 添加了strict 作为可选参数，以避免在包含多种颜色的值中进行颜色替换。

片段

// Below function modified from solution here: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? "rgb(" + [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ].join(', ') + ")" : null;
}

// Function to change a color to another one
function colorChange(colorOld, colorNew, strict = false) {
  // If hex notation, convert to rgb
  if (colorOld.includes('#'))
    colorOld = hexToRgb(colorOld);
  // Loop through all elements styles
  [...document.all].forEach(elm => {
    let cStyle = getComputedStyle(elm);
    [...cStyle].forEach(prop => {
      // Escape if not a string
      if (typeof cStyle[prop] !== 'string') return;
      // Check if colorOld is in property
      if (cStyle[prop].includes(colorOld)){
        // If strict, colorOld is replaced only if it's the only value of the property
        if (!strict || cStyle[prop] === colorOld)
          elm.style[prop] = cStyle[prop].replace(colorOld, colorNew); // Replace color
      }
    })
  })
};

// Then, call your function the way you like !
colorChange("rgb(255, 0, 0)", 'orange');
colorChange("#00ff00", '#125689', true); // Note the use of the “strict” parameter here
colorChange("#00f", 'rgb(255, 0, 128)');

<p style="color: rgb(255, 0, 0);">I was red !</p>
<p style="color: #00ff00;">I was green !</p>
<p style="color: #00f;">I was blue !</p>
<div style="background: linear-gradient(to right, #f00, #0000ff);">
  <p>I was a gradient from red to blue</p>
</div>
<div style="background: linear-gradient(to right, #ff0000, #0f0);">
  <p>I was a gradient from red to green (green is not replaced here, because of the use of “strict”)</p>
</div>

当然，您可以在将这些功能复制/粘贴到控制台后尝试此页面上的功能。 （例如colorChange("#eff0f1", "#ffaaaa");）

希望对你有帮助。

Answer 2

您写道： 使用浏览器控制台将本站点中的 #FFF8DC 颜色更改为 #e6dfc6。

这很容易！在这个网站上，我们在右侧有 #FFF8DC 和 backgroundColor by "Featured on Meta" div 块。您必须在浏览器控制台中输入：

document.querySelector('.community-bulletin').style.backgroundColor = "#e6dfc6";

或者你可以使用“检查元素”来选择一些元素，就像这个截图一样：

然后要更改此前景色和背景色，您必须将其放入浏览器控制台：

$0.style.color = "orange";
$0.style.backgroundColor = "#e6dfc6";

按下enter key，颜色就会改变。

如果你想一直为控制台使用一些代码，那么你必须使用 sn-ps。转到开发人员工具，然后点击标签"Sources"，就像这个截图一样：

然后将您的代码放到一个新的 sn-p 中，然后用鼠标右键单击此 sn-p 中的名称，然后在上下文菜单中单击 "Run"。这个 sn-p 将被执行。不要忘记保存这个 sn-p：用鼠标右键单击这个 sn-p 中的名称，然后在上下文菜单中单击 "Save..."，但在显示的 "Save dialog box" 上单击 "Cancel"（这很奇怪）和你的sn-p 将被保存。