1

I define several color in css now I want to get all the colors and to do some checks for example to build new objects with all the colors , in this case i want to have object with data of the colors of the first second and third in runtime is it possible ?

<html>
<head>
  <style>

   p.first { color: gray; }
   p.second { color: red; }
   p.third { 
    background: purple;
    color: white;
   }

  </style>
</head>
<body>
Sirko
  • 72,589
  • 19
  • 149
  • 183
user1365697
  • 5,819
  • 15
  • 60
  • 96

2 Answers2

1

jQuery makes this sort of thing trivial to do.

Once you have jQuery loaded, you can do something as simple as this (utilizing jQuery.css): 

var color = jQuery("p.first").css("color");

To set up an object as you state in your question:

var colors = {firstcolor:jQuery("p.first").css("color"), secondcolor:jQuery("p.second").css("color")};

NOTE: This will return RGB values. To convert to hex, see This Stackoverflow Answer

Community
  • 1
  • 1
random_user_name
  • 25,694
  • 7
  • 76
  • 115
1

To do it without jQuery is also pretty easy:

var p = document.getElementsByTagName('p');
var first = p.getElementsByClassName('first');
console.log(first.item(0).style.color); // etc
bokonic
  • 1,751
  • 10
  • 12