How to change the color of a div from an exiting color on already?

Question

So basically if you get what I am doing, I want it to be such that when I click the next button the color of one goes to three and three goes to two and two goes to one. I have been trying to make it fetch the color of two but without success

<!DOCTYPE html>
<html>

<Head>
    <style>
        div {
            height: 50px;
        }
        
        #one {
            width: 100%;
            background-color: #f00;
        }
        
        #two {
            width: 50%;
            background-color: #0f0;
            float: left;
        }
        
        #three {
            width: 50%;
            background-color: #00f;
            float: right;
        }
    </style>
    <script>
        function oneToTwo() {
            document.getElementById("one").style.backgroundColor = document.getElementById("two").style.backgroundColor;
        }
    </script>
</Head>

<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <input type="button" value="Back" title="The back button">
    <input type="button" value="Next" title="The next button" onclick="oneToTwo()">
</body>

</html>

`element.style.property` almost always results in a blank string (`""`). You can get the CSS of an element with `document.styleSheets`. See https://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element — code, Mar 05 '22 at 21:45
Defining a style in a stylesheet does not update the style of an element. You can use conputedStyle to get the styles that the system has worked out. — A Haworth, Mar 05 '22 at 21:50
There's further discusion of this seemingly strange behaviour here: https://stackoverflow.com/questions/1887104/how-to-get-the-background-color-of-an-html-element — Dave Pritlove, Mar 05 '22 at 22:21

score 0 · Accepted Answer · answered Mar 05 '22 at 21:58

A style that is inherited from a class is not accessible via an individual style property. You can however use getComputedStyle, although I would actually just store those colors in variables. But for the purpose of showing what getComputedStyle can do, here is an adapted script:

let areas = document.querySelectorAll(".area");

function rotate(dir=1) {
    // Fetch colors
    let colors = Array.from(areas, area => getComputedStyle(area).backgroundColor);
    // Rotate them
    if (dir == 1) colors.push(colors.shift());
    else colors.unshift(colors.pop());
    // Assign them back
    areas.forEach(area => area.style.backgroundColor = colors.shift());
}

div {
    height: 50px;
}

#one {
    width: 100%;
    background-color: #f00;
}

#two {
    width: 50%;
    background-color: #0f0;
    float: left;
}

#three {
    width: 50%;
    background-color: #00f;
    float: right;
}

<div id="one" class="area"></div>
<div id="two" class="area"></div>
<div id="three" class="area"></div>
<input type="button" value="Back" title="The back button" onclick="rotate(-1)">
<input type="button" value="Next" title="The next button" onclick="rotate(1)">

Thank you very much for this I can see that you also did the back button for me — Baschirou Abdel Karim, Mar 06 '22 at 09:04

score 0 · Answer 2 · answered Mar 05 '22 at 21:59

You can use the window.getComputedStyle() to acces all the CSS properties of an element. Here you can use the

window.getComputedStyle(document.getElementById("two")).backgroundColor;

to access the background color of your second div element.

Further documentation on getComputedStyle() can be accesed here:

Window.getComputedStyle()

<!DOCTYPE html>
<html>

<Head>
    <style>
        div {
            height: 50px;
        }
        
        #one {
            width: 100%;
            background-color: #f00;
        }
        
        #two {
            width: 50%;
            background-color: #0f0;
            float: left;
        }
        
        #three {
            width: 50%;
            background-color: #00f;
            float: right;
        }
    </style>
    <script>
        function oneToTwo() {
            document.getElementById("one").style.backgroundColor = window.getComputedStyle(document.getElementById("two")).backgroundColor;

        }
    </script>
</Head>

<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <input type="button" value="Back" title="The back button">
    <input type="button" value="Next" title="The next button" onclick="oneToTwo()">
</body>

</html>

How to change the color of a div from an exiting color on already?

2 Answers2