How javascript alert a css value? [duplicate]

Question

Hi there I'm having a problem. I made a box of blue color in HTML/CSS and want javascript to alert the name of color when the box is clicked. Here is my code.`

var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
    alert(clr);
}

<!DOCTYPE html>
<html>

   <head>
  <title>
  </title>
  <style>
     #box {
        height: 100px;
        width: 100px;
        background-color: blue;
        margin: 0px;
        display: inline-block;
     }

  </style>
   </head>

   <body>
  <div id="box" class="box">
  </div>
   </body>

</html>

..... aaaaand...? What is the status of your problem? What happens? — Ronen Cypis
– Ronen Cypis, Commented Jun 14, 2016 at 6:41
The background-color is set via CSS and not inline styles, so you should use getComputedStyle — Harry
– Harry, Commented Jun 14, 2016 at 6:41
alert the name of color....i guess this closes the question itself. — Jai
– Jai, Commented Jun 14, 2016 at 6:44
With getcomputed my guess is het will get the RGB values, not the actual name ... — Yoeri
– Yoeri, Commented Jun 14, 2016 at 6:45

Adam Azad · Accepted Answer · 2016-06-14 06:46:12Z

1

You need to use getComputedStyle(). .style is use to set a new value for target element.

var div     = document.getElementById("box"), // element
    divCSS  = window.getComputedStyle(div), // element CSS 
    bgColor = divCSS.getPropertyValue('background-color'); // property


document.getElementById("box").onclick= function() {
    alert(bgColor);
}

#box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: 0px;
  display: inline-block;
}

<div id="box" class="box"></div>

answered Jun 14, 2016 at 6:46

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yoeri Over a year ago

Okay, i guessed right , you'll still need some JS to convert the RGB values to a named color

Adam Azad Over a year ago

@Yoeri, you're right, but that would require a sort of library, or at last creating a array with values for each for all registered color names.

Yoeri Over a year ago

Indeed, best answer ... no can do without additional translation code.

viveksinghggits · Accepted Answer · 2016-06-14 06:51:25Z

1

Here is the working code

<!DOCTYPE html>
<html>

   <head>
  <title>
  </title>
  <style>
     #box {
        height: 100px;
        width: 100px;
        background-color: blue;
        margin: 0px;
        display: inline-block;
     }

  </style>
   </head>

   <body>
  <div id="box" class="box">
  </div>
   </body>

</html>
<script>
/*  var clr = document.getElementById("box").style.backgroundColor;*/
    document.getElementById("box").onclick= function() {

    var ele = document.getElementById("box");
    var style = window.getComputedStyle(ele);
    var bColor = style.getPropertyValue("background-color");
    alert(bColor);
    }

</script>

answered Jun 14, 2016 at 6:51

viveksinghggits

7001 gold badge15 silver badges37 bronze badges

1 Comment

ahsan_khan Over a year ago

Ok. It gives the rgb value. Any way to get the name of colour like blue, actually I'm trying to make a color game in which user will told to click on given color and user will click on the box and programme will check whether it is the same color that was told to him.

Deepak Dholiyan · Accepted Answer · 2016-06-14 06:54:28Z

-1

This works

var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
    alert(clr);
}

<!DOCTYPE html>
    <html>
    <head>
        <title>

        </title>

    </head>
    <body>
      <div id="box" class="box" style="height: 100px;width: 100px;background-color: blue;margin: 0px;display: inline-block;"></div>
    </body>
    </html>

You can also use below code with provided html

  <script>
    var clr=  window.getComputedStyle(document.getElementById("box")).getPropertyValue('background-color'); // property
   document.getElementById("box").onclick= function() {
   alert(clr);
 }
 </script>

edited Jun 14, 2016 at 6:54

answered Jun 14, 2016 at 6:47

Deepak Dholiyan

1,9321 gold badge23 silver badges36 bronze badges

Comments

Dev Utkarsh · Accepted Answer · 2016-06-14 07:56:46Z

-1

Try using the variable clr inside the function. Also invoke the fucntion using onclick on the div itself. Using regex to get the property backgorund color in whole css. You can also use filter on #box using

var boxCss = clr.match(/#box{((.*\s*.*)*)}/g);


        <!DOCTYPE html>
        <html>
        <head>
            <title>

            </title>
    <script>

     function colorAlert() {
           var clr = document.getElementsByTagName("style")[0].innerHTML;   
    var res = clr.match(/background-color:.*;/g);
    alert(res[0]);
    }
    </script>
                <style>
                #box{

                            height: 100px;
                            width: 100px;
                            background-color: blue;
                            margin: 0px;
                            display: inline-block;
                    }
                </style>
        </head>
        <body>
            <div id="box" class="box" onclick="colorAlert();">

                    </div>
        </body>
        </html>

edited Jun 14, 2016 at 7:56

answered Jun 14, 2016 at 6:45

Dev Utkarsh

1,4962 gold badges21 silver badges44 bronze badges

2 Comments

Jai Over a year ago

so this alerts blue right??? if not then remove the answer.

Dev Utkarsh Over a year ago

No, this helps me get comments of people who don't try but criticize.

Antoine Subit · Accepted Answer · 2016-06-14 09:52:20Z

-2

You have two ways to solve this :

keep <script> tag after after closing <div> tag
move clr var in side the onclick function,then you can write <script> tag where ever you want

edited Jun 14, 2016 at 9:52

Antoine Subit

9,9534 gold badges40 silver badges53 bronze badges

answered Jun 14, 2016 at 6:44

user3718238

11 bronze badge

1 Comment

Jai Over a year ago

did you understand the requirement?

Collectives™ on Stack Overflow

How javascript alert a css value? [duplicate]

5 Answers 5

3 Comments

1 Comment

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

2 Comments

1 Comment

Linked

Related