CSS Values Cannot be Pulled by Javascript

Question

I am working on a website project and I am puzzled about this fact. Once javascript runs it always returns false for any value. In order to simplify it, I wrote a simple code and put it in here so you can see what is going on.

I believe if I put the whole css and javascript codes in html file this issue wont recur.

https://jsfiddle.net/0m2L7f1u/

HTML

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p id="test">This is an example</p>
     <button type="button" id="myButton">Click</button>

    <script src="main.js"></script>
</body>

</html>

CSS

#test{
    display: block;
    color: blue;
}

JS

document.getElementById("myButton").addEventListener("click", toggleMe);

function toggleMe(){
    alert(document.getElementById("test").style.display == "block");
    alert(document.getElementById("test").style.color == "blue");
}

Could you tell me how we can successfully load all data of CSS into Javascript?

Have you tried ```getComputedStyle```? **Edit** Only issue with this approach is that you'd have to check the rgb value rather than the name of the colour. — JO3-W3B-D3V, Dec 30 '18 at 15:46
The `style` object on an element node only shows styles *directly* coded into the HTML for that element. Styles implied by CSS rules have to be fetched via `getComputedStyle()` (and I think something similar but different in older IE versions). — Pointy, Dec 30 '18 at 15:49
@Gingercook your issue is similar to the following thread [How to get an HTML element's style values in javascript?](https://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript) — Chirag R, Dec 30 '18 at 16:01
Thanks everyone it helped really :). I upped all of you who shared their knowledge. — Codecygen, Dec 31 '18 at 19:47

score 1 · Answer 1 · answered Dec 30 '18 at 16:00

Here's a messy-ish solution that I've cooked together using an array of different answers to similar questions I've seen on here...

This solution converts the rgb value to a hex value and the colour name to the hex value, then it compares the hex values, nothing mind blowing. Maybe a little messy, but hey, it works!

Edit

You need to do something similar to this simply because using the getComputedStyle will return rgb(0, 0, 255) and of course comparing that to a string blue just won't work. Therefore you need a way to convert both values so that they can be compared, i.e. blue is in fact equal to rgb(0, 0, 255) but of course, JavaScript won't automatically know that...

document.getElementById("myButton").addEventListener("click", toggleMe);

var rgbToHex = function(rgb) {

  var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");

  //Function to convert rgb color to hex format
  function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }

  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
  return rgb2hex(rgb);
};

function colourNameToHex(colour) {
  var colours = {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "#f5f5dc",
    "bisque": "#ffe4c4",
    "black": "#000000",
    "blanchedalmond": "#ffebcd",
    "blue": "#0000ff",
    "blueviolet": "#8a2be2",
    "brown": "#a52a2a",
    "burlywood": "#deb887",
    "cadetblue": "#5f9ea0",
    "chartreuse": "#7fff00",
    "chocolate": "#d2691e",
    "coral": "#ff7f50",
    "cornflowerblue": "#6495ed",
    "cornsilk": "#fff8dc",
    "crimson": "#dc143c",
    "cyan": "#00ffff",
    "darkblue": "#00008b",
    "darkcyan": "#008b8b",
    "darkgoldenrod": "#b8860b",
    "darkgray": "#a9a9a9",
    "darkgreen": "#006400",
    "darkkhaki": "#bdb76b",
    "darkmagenta": "#8b008b",
    "darkolivegreen": "#556b2f",
    "darkorange": "#ff8c00",
    "darkorchid": "#9932cc",
    "darkred": "#8b0000",
    "darksalmon": "#e9967a",
    "darkseagreen": "#8fbc8f",
    "darkslateblue": "#483d8b",
    "darkslategray": "#2f4f4f",
    "darkturquoise": "#00ced1",
    "darkviolet": "#9400d3",
    "deeppink": "#ff1493",
    "deepskyblue": "#00bfff",
    "dimgray": "#696969",
    "dodgerblue": "#1e90ff",
    "firebrick": "#b22222",
    "floralwhite": "#fffaf0",
    "forestgreen": "#228b22",
    "fuchsia": "#ff00ff",
    "gainsboro": "#dcdcdc",
    "ghostwhite": "#f8f8ff",
    "gold": "#ffd700",
    "goldenrod": "#daa520",
    "gray": "#808080",
    "green": "#008000",
    "greenyellow": "#adff2f",
    "honeydew": "#f0fff0",
    "hotpink": "#ff69b4",
    "indianred ": "#cd5c5c",
    "indigo": "#4b0082",
    "ivory": "#fffff0",
    "khaki": "#f0e68c",
    "lavender": "#e6e6fa",
    "lavenderblush": "#fff0f5",
    "lawngreen": "#7cfc00",
    "lemonchiffon": "#fffacd",
    "lightblue": "#add8e6",
    "lightcoral": "#f08080",
    "lightcyan": "#e0ffff",
    "lightgoldenrodyellow": "#fafad2",
    "lightgrey": "#d3d3d3",
    "lightgreen": "#90ee90",
    "lightpink": "#ffb6c1",
    "lightsalmon": "#ffa07a",
    "lightseagreen": "#20b2aa",
    "lightskyblue": "#87cefa",
    "lightslategray": "#778899",
    "lightsteelblue": "#b0c4de",
    "lightyellow": "#ffffe0",
    "lime": "#00ff00",
    "limegreen": "#32cd32",
    "linen": "#faf0e6",
    "magenta": "#ff00ff",
    "maroon": "#800000",
    "mediumaquamarine": "#66cdaa",
    "mediumblue": "#0000cd",
    "mediumorchid": "#ba55d3",
    "mediumpurple": "#9370d8",
    "mediumseagreen": "#3cb371",
    "mediumslateblue": "#7b68ee",
    "mediumspringgreen": "#00fa9a",
    "mediumturquoise": "#48d1cc",
    "mediumvioletred": "#c71585",
    "midnightblue": "#191970",
    "mintcream": "#f5fffa",
    "mistyrose": "#ffe4e1",
    "moccasin": "#ffe4b5",
    "navajowhite": "#ffdead",
    "navy": "#000080",
    "oldlace": "#fdf5e6",
    "olive": "#808000",
    "olivedrab": "#6b8e23",
    "orange": "#ffa500",
    "orangered": "#ff4500",
    "orchid": "#da70d6",
    "palegoldenrod": "#eee8aa",
    "palegreen": "#98fb98",
    "paleturquoise": "#afeeee",
    "palevioletred": "#d87093",
    "papayawhip": "#ffefd5",
    "peachpuff": "#ffdab9",
    "peru": "#cd853f",
    "pink": "#ffc0cb",
    "plum": "#dda0dd",
    "powderblue": "#b0e0e6",
    "purple": "#800080",
    "rebeccapurple": "#663399",
    "red": "#ff0000",
    "rosybrown": "#bc8f8f",
    "royalblue": "#4169e1",
    "saddlebrown": "#8b4513",
    "salmon": "#fa8072",
    "sandybrown": "#f4a460",
    "seagreen": "#2e8b57",
    "seashell": "#fff5ee",
    "sienna": "#a0522d",
    "silver": "#c0c0c0",
    "skyblue": "#87ceeb",
    "slateblue": "#6a5acd",
    "slategray": "#708090",
    "snow": "#fffafa",
    "springgreen": "#00ff7f",
    "steelblue": "#4682b4",
    "tan": "#d2b48c",
    "teal": "#008080",
    "thistle": "#d8bfd8",
    "tomato": "#ff6347",
    "turquoise": "#40e0d0",
    "violet": "#ee82ee",
    "wheat": "#f5deb3",
    "white": "#ffffff",
    "whitesmoke": "#f5f5f5",
    "yellow": "#ffff00",
    "yellowgreen": "#9acd32"
  };

  if (typeof colours[colour.toLowerCase()] != 'undefined')
    return colours[colour.toLowerCase()];

  return false;
}

function toggleMe() {
  alert(getComputedStyle(document.getElementById("test")).display == "block");
  alert(rgbToHex(getComputedStyle(document.getElementById("test")).color) == colourNameToHex("blue"));
  console.log(rgbToHex(getComputedStyle(document.getElementById("test")).color));
  console.log(colourNameToHex("blue"));
}

#test {
  display: block;
  color: blue;
}

<!DOCTYPE html>

<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <p id="test">This is an example</p>
    <button type="button" id="myButton">Click</button>

    <script src="main.js"></script>
  </body>

</html>

CSS Values Cannot be Pulled by Javascript

1 Answers1

Edit