79215568

Date: 2024-11-22 15:22:18
Score: 0.5
Natty:
Report link

// 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>

Reasons:
  • Blacklisted phrase (1): stackoverflow
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Milos Ristic