how to get the background color of a div inside input - JavaScript

Question

I dont know why this code is not working! why is it showing the alert blank?

<html lang="en">

    <head>
        <title>Document</title>
        <style>
            #dd{
                height: 300px;
                width: 300px;
                background-color: mediumblue;
                color: white;
            }

        </style>
    </head>

    <body>
        <label>Color </label><input id="in1" type="text">
        <hr>

        <div id="dd">
    </div>

        <script>
            var colorTextBox = document.getElementById("in1");
            var div = document.getElementById("dd");

            div.onclick = function(){
                colorTextBox.value = div.style.backgroundColor;
        alert(div.style.backgroundColor);
            }

        </script>
       
    </body>
</html>

when the div is clicked the background color of the div should be written inside the input box and also shown in the alert.

Duplicate of why javascript this.style[property] return an empty string?. — Sebastian Simon
– Sebastian Simon, Commented Mar 20, 2021 at 14:49

MSQ · Accepted Answer · 2021-03-20 14:55:46Z

Have this, it will compute the rgb color: `

    var colorTextBox = document.getElementById("in1");
                var div = document.getElementById("dd");

                div.onclick = function(){
                    //colorTextBox.value = div.style.backgroundColor;
            //alert(div.style.backgroundColor);
            
            const element = document.querySelector('#dd');
            const style = getComputedStyle(element)
            var color= style.backgroundColor;
            alert(color);
                }

    <html lang="en">

        <head>
            <title>Document</title>
            <style>
                #dd{
                    height: 300px;
                    width: 300px;
                    background-color: mediumblue;
                    color: white;
                }

            </style>
        </head>

        <body>
            <label>Color </label><input id="in1" type="text">
            <hr>

            <div id="dd">
        </div>

            <script>
                
            </script>
           
        </body>
    </html>

`

jdabtieu · Accepted Answer · 2021-03-20 14:56:55Z

0

Element.style.<style> can only retrieve styles if it's inline.

For example, if you changed the div to be <div id="dd" style="background-color: mediumblue">, then div.style.backgroundColor will return mediumblue.

To get the background-color as defined in your style tag, you should use getComputedStyle(Element) instead. getComputedStyle(div).backgroundColor does work, returning rgb(0, 0, 205), which is the rgb value for mediumblue.

Demo

answered Mar 20, 2021 at 14:56

jdabtieu

5645 silver badges20 bronze badges

2 Comments

Hassaan Raza Now Over a year ago

right can i some how get the name of the color? like mediumblue

jdabtieu Over a year ago

@HassaanRazaNow This might help: stackoverflow.com/questions/5486730/…

Collectives™ on Stack Overflow

how to get the background color of a div inside input - JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related