Change the color of all elements
Question
I'm looking to change the 'accent' color of a website. Does anyone know an efficient way to change the background-color, color and border-color of all elements with the color 'magenta' for example? Is there a way to detect for the property magenta in the CSS file and replace it with another color? I am building an extension for a website (and would prefer not to append a massive CSS file with the color change) and cannot change the source code of the site.
If there is anything unclear please feel free to ask.
2 answers
solution1
2 2015-09-28 03:24:24
You can change multiple css properties using jQuery .css() method:
$(".yourCssSelector").css({
"background-color": "magenta",
"color": "#00FF00",
"border-color": "blue"
});
or using vanilla JS:
// choose an element using any of these:
var elem = document.getElementById('your-id');
var elem = document.getElementsByClassName('your-class-name')[0];
var elem = document.getElementsByTagName('div')[1]; // indexes are for example
elem.style.borderColor = 'blue';
elem.style.backgroundColor = 'magenta';
elem.style.color = '#00FF00';
Yes, it will require many CSS changes. You want to change the appearence of the whole web-site - of course, it will. I don't think that your web-site's designer has colored every element with magenta by inline styling - there are existent styles, choose selectors and classes wisely and you will easily do this.
solution2
1 ACCPTED 2015-09-28 03:24:41
You could do something like this. Loop through all of the elements, and if the computed color is magenta, set the new color on the element.
var elems = document.body.getElementsByTagName("*"),
oldColor = "rgb(255, 0, 255)",
newColor = "rgb(0, 0, 0)";
function getValue (elem, property) {
return window.getComputedStyle(elem, null)
.getPropertyValue(property);
}
Array.prototype.forEach.call(elems, function (elem) {
var backgroundColor = getValue(elem, "background-color"),
borderColor = getValue(elem, "border-color"),
color = getValue(elem, "color");
if (backgroundColor == oldColor) {
elem.style.backgroundColor = newColor;
}
if (borderColor == oldColor) {
elem.style.borderColor = newColor;
}
if (color == oldColor) {
elem.style.color = newColor;
}
});
function changeColors () { var elems = document.body.getElementsByTagName("*"), oldColor = "rgb(255, 0, 255)", newColor = "rgb(0, 0, 0)"; function getValue (elem, property) { return window.getComputedStyle(elem, null) .getPropertyValue(property); } console.log(elems); [].forEach.call(elems, function (elem) { var backgroundColor = getValue(elem, "background-color"), borderColor = getValue(elem, "border-color"), color = getValue(elem, "color"); if (backgroundColor == oldColor) { elem.style.backgroundColor = newColor; } if (borderColor == oldColor) { elem.style.borderColor = newColor; } if (color == oldColor) { elem.style.color = newColor; } }); }
.magenta-background { color: white; background-color: magenta; } .magenta-color { color: magenta; } .magenta-border { border: solid 2px magenta; }
<body> <div class="magenta-background">Magenta Background</div> <div class="magenta-color">Magenta text</div> <div class="magenta-border">Magenta border</div> <button onclick="changeColors()">Change Colors</button> </body>
I wouldn't recommend doing this if there is any other alternative. Changing the CSS up front would be ideal, and not using JS at all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.