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

hrysbysz  于 2023-05-12  发布在  Java
关注(0)|答案(2)|浏览(220)

我是一个网页设计师。
当我浏览网站时,我喜欢改变一些颜色,看看当我改变原色时网站会出现什么样的效果。
我使用“检查元素”来实现这一点。但这是非常耗时的工作,因为我需要添加大量的代码来改变无处不在。
是否有任何JavaScript代码,我可以用来改变一个颜色代码到另一个颜色代码使用浏览器控制台。
基本上我想要的是下面这样的东西...

使用浏览器控制台将本站所有地方的#FFF8DC颜色更改为#e6dfc6颜色。

yzxexxkh

yzxexxkh1#

原则

正如Kaiido评论的那样:* ”.getComputedStyle()应始终以rgb(nnn, nnn, nnn)rgba(nnn, nnn, nnn, n)返回计算值“*。
因此,在循环遍历所有元素计算样式属性并替换适用的颜色值之后,应该没有太多事情要做。

我的更新

  • 由于您希望能够 “Change #FFF8DC color to #e6dfc6 color”,因此我修改了solutionRGB to hex and hex to RGB)中的函数,以便能够在我的代码片段中使用它,
  • 修改了我的函数,使其可以处理包含多种颜色的属性值(例如梯度),
  • 添加了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");

wlzqhblo

wlzqhblo2#

**您写道:**使用浏览器控制台将本网站中的所有地方的#FFF8DC颜色更改为#e6dfc6颜色。

这很简单!在这个网站上,我们有#FFF8DC作为backgroundColor"Featured on Meta"div块在右边。您必须在浏览器控制台中放置:

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

或者你可以使用“inspect elements”来选择一些元素,就像下面这个截图:

然后为了改变这个前景和背景颜色,你必须把它放在浏览器控制台中:

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

enter key,颜色会改变。

如果你想使用一些代码的控制台所有的时间那么你必须使用片段。转到开发人员工具,点击标签"Sources",如屏幕截图所示:

然后把你的代码到一个新的片段,然后用鼠标右键单击这个片段的名称,并在上下文菜单中单击"Run"。将执行此代码段。别忘了保存这段代码:用鼠标右键单击此代码片段中的名称,并在上下文菜单中单击"Save...",但在显示的"Save dialog box"上单击"Cancel"(这很奇怪),您的代码片段将被保存。

相关问题