How javascript alert a css value?

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, Jun 14 '16 at 06:41
The `background-color` is set via CSS and not inline styles, so you should use `getComputedStyle` — Harry, Jun 14 '16 at 06:41
_alert the name of color_....i guess this closes the question itself. — Jai, Jun 14 '16 at 06:44
With getcomputed my guess is het will get the RGB values, not the actual name ... — Yoeri, Jun 14 '16 at 06:45
Valid point @Yoeri but I don't think there is an alternate unless he sets the background via inline styles. — Harry, Jun 14 '16 at 06:47
`var clr = document.getElementById("box");` `document.getElementById("box").onclick= function() {` `alert(window.getComputedStyle(clr,null).getPropertyValue("background-color"));` `}` — dr. strange, Jun 14 '16 at 06:55

score 1 · Accepted Answer · answered Jun 14 '16 at 06:46

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 '16 at 06:46

Adam Azad

11,171
5
29
70

Okay, i guessed right , you'll still need some JS to convert the RGB values to a named color – Yoeri Jun 14 '16 at 06:50
@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. – Adam Azad Jun 14 '16 at 06:51
Indeed, best answer ... no can do without additional translation code. – Yoeri Jun 14 '16 at 06:54

score 1 · Answer 2 · answered Jun 14 '16 at 06:51

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>

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. — ahsan_khan, Jun 14 '16 at 07:01

Dev Utkarsh · Answer 3 · 2016-06-14T07:56:46.763

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>

No, this helps me get comments of people who don't try but criticize. — Dev Utkarsh, Jun 14 '16 at 06:58

Deepak Dholiyan · Answer 4 · 2016-06-14T06:54:28.087

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>

score -2 · Answer 5 · edited Jun 14 '16 at 09:52

-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 '16 at 09:52

Antoine Subit

9,803
4
36
52

answered Jun 14 '16 at 06:44

user3718238

1
1

did you understand the requirement? – Jai Jun 14 '16 at 06:45

How javascript alert a css value?

5 Answers5