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

Question

我是一名网页设计师。

当我浏览网站时，我喜欢更改一些颜色，并查看更改主颜色时网站的外观。

我使用“检查元素”来做到这一点。但这是非常耗时的工作，因为我需要添加大量代码来更改各处。

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

基本上我想要的是像下面这样的......

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

Answer 1

原则

\n

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

\n

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

\n

我的更新

\n

\n
• 由于您希望能够将\xe2\x80\x9cChange #FFF8DC color 更改为 #e6dfc6 color\xe2\x80\x9d ，我修改了此解决方案中的函数（RGB 到十六进制和十六进制到 RGB）以便能够在我的片段，
\n
• 修改了我的函数，使其适用于包含多种颜色（例如渐变）的属性值，
\n
• 作为可选参数添加strict，以便能够避免包含多种颜色的值中的颜色替换。
\n

\n

片段

\n

\r\n

\r\n

// Below function modified from solution here: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb\nfunction hexToRgb(hex) {\n  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")\n  var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  hex = hex.replace(shorthandRegex, function(m, r, g, b) {\n    return r + r + g + g + b + b;\n  });\n\n  var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result ? "rgb(" + [\n    parseInt(result[1], 16),\n    parseInt(result[2], 16),\n    parseInt(result[3], 16)\n  ].join(\', \') + ")" : null;\n}\n\n// Function to change a color to another one\nfunction colorChange(colorOld, colorNew, strict = false) {\n  // If hex notation, convert to rgb\n  if (colorOld.includes(\'#\'))\n    colorOld = hexToRgb(colorOld);\n  // Loop through all elements styles\n  [...document.all].forEach(elm => {\n    let cStyle = getComputedStyle(elm);\n    [...cStyle].forEach(prop => {\n      // Escape if not a string\n      if (typeof cStyle[prop] !== \'string\') return;\n      // Check if colorOld is in property\n      if (cStyle[prop].includes(colorOld)){\n        // If strict, colorOld is replaced only if it\'s the only value of the property\n        if (!strict || cStyle[prop] === colorOld)\n          elm.style[prop] = cStyle[prop].replace(colorOld, colorNew); // Replace color\n      }\n    })\n  })\n};\n\n// Then, call your function the way you like !\ncolorChange("rgb(255, 0, 0)", \'orange\');\ncolorChange("#00ff00", \'#125689\', true); // Note the use of the \xe2\x80\x9cstrict\xe2\x80\x9d parameter here\ncolorChange("#00f", \'rgb(255, 0, 128)\');

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n