Ten zapis
elementcolor.style["background-color"]="blue"; // zmienia kolor;
ale
elementcolor.style["background-color"]+="rgb(100,100,100)"; //już nie.
nie zadziała, bo
- element.style służy tylko do przypisywania wartości (nie dokonuje żadnych obliczeń)
- wartość zapisana między "" jest stringiem więc zapis += zadziała jak concatenate strings
elementcolor.style["background-color"]+="rgb(100,100,100)";
da wynik bluergb(100,100,100) , który jest błędnym zapisem i zostanie zignorowany.
<style>
div {
font: 900 2em system-ui;
padding: 1em;
color: orange;
}
</style>
<div>Lorem</div>
<script>
const elementcolor = document.querySelector('div');
setTimeout(() => {
elementcolor.style["background-color"] = "blue";
console.log('1', elementcolor.style["background-color"]);
setTimeout(() => {
elementcolor.style["background-color"] += "rgb(100,100,100)";
console.log('2', elementcolor.style["background-color"]);
}, 2000);
}, 2000);
</script>
IMHO do tego typu operacji na kolor w css sprawdza się bardzo dobrze zapis koloru w postaci HSL, oczywiście zawsze możesz użyć jakiejś biblioteki do manipulowania kolorami (jak już wspomniał @Gynvael Coldwind)
[ on-line ]
color: hsl(180, 100%, 10%); // rgb(0, 51, 51)
color: hsl(180, 100%, 15%); // rgb(0, 77, 77)
color: hsl(180, 100%, 20%); // rgb(0, 102, 102)
color: hsl(180, 100%, 25%); // rgb(0, 128, 128)
color: hsl(180, 100%, 30%); // rgb(0, 153, 153)
color: hsl(180, 100%, 35%); // rgb(0, 179, 179)