Write CSS Class or ID Color?

[la79]

Hi Everyone,

I've been looking everywhere on how to do this but I'm wondering if you can help. I'm basically in the process of designing a site which will write the color value (hex) of an html element based on its CSS Class or ID background or type color. Can it be done? I'm sure it can but how I have no idea. I would be very grateful for any help and knowledge you can give...

Thank you to the genius that helps!

[magicyte]

Um, you could assign a color to a hexadecimal value, but I'm not exactly sure what you want... Could you please explain further?

[la79]

Hi Chris, thanks for your reply. Basically I'm designing a regular HTML website with css. I can apply colors etc through the css. The special thing I would like to do is use javascript to produce a dynamic text box that states the bgcolor or type color of a CSS class or Id in a hex format.

For instance I have a table. Two cells are a certain color through css. Now within each table cell is a text box that lists the hex color used for those cells. Or another example I have text that's colored. Next to that text the hex color appears with the valu of the colored text. So regardless of the color used for both instances the hex will always be there...

Hope I wasn't too confusing...thanks again for the help...

[magicyte]

Would you just like these text boxes to be filled with hex values upon loading of the page or upon each change of the color? If you understand javascript, you may be farmiliar with "setInterval" that would check for its background color every x milliseconds. Do you have a website or an example page online? If not, could you please post the code here so that we can use it for a template?

Sorry for all of the questions, but also, would you like for the javascript to get the background color of an element on the webpage (if it has a certain class, it would be getting the background color from the element and that element's background color would be coming from the css class or #id), or do you want the javascript to get the background color through raw css? I do not think that it can be accessed through RAW css, though I would suppose that just finding the background color of an element on the webpage that could have a special class would be getting the background color of that special class.

To achieve this seemingly hard feat, yet is in truth simpler than hard, we would create a function that would access an element's styles. I'll make it easy for you, which I should as a default, but I'm usually lazy... You can edit the code easily if you don't get javascript very well, which if you don't, I highly suggest you check here for a simple tutorial. Let's begin:

We'll start with the setInterval function. I think we should give a variable the set interval function, x perhaps, like so:

var x = setInterval(/* css checking function here */, /* interval here */);

Now let's make the interval variable. We'll call it i:

var i = 5; // interval in seconds

Replace the highlighted 5 with any number of seconds you want for the background color to be checked. After we make an interval, we should make a function. We can assign a variable a function easily. This variable will be used in setInterval to do the actual checking of the element work. We'll name this variable f:

var f = function(mid, cid) { // function parameters: { mid: textbox id, cid: cell/element id }
  var el1 = document.getElementById(mid);
  var el2 = document.getElementById(cid);
  var colorArr = [
    ["aqua", "#00FFFF"],
    ["black", "#000000"],
    ["blue", "#0000FF"],
    ["fuchsia", "#FF00FF"],
    ["gray", "#808080"],
    ["green", "#008000"],
    ["lime", "#00FF00"],
    ["maroon", "#800000"],
    ["navy", "#000080"],
    ["olive", "#808000"],
    ["purple", "#800080"],
    ["red", "#FF0000"],
    ["silver", "#C0C0C0"],
    ["teal", "#008080"],
    ["white", "#FFFFFF"],
    ["yellow", "#FFFF00"]
  ];
  for(i = 0; i < colorArr.length; i++) {
    if(el2.style.backgroundColor.toLowerCase() == colorArr[i][0]) { // checks for color name
      el1.value = colorArr[i][1]; // sets value in textbox
	  return; // exits function
    }
  }
  el1.value = el2.style.backgroundColor;
};

Defined are the 16 base colors in HTML. There is no other way to convert color names into hex, so I just made an array instead. There are too css many colors for me to apply to the color array right now (it's getting late), so if you want to add them all to the array, which I think you would, click here. Again, laziness! Now that we have everything set up, we can execute our script:

var f = function(mid, cid) { // function parameters: { mid: textbox id, cid: cell/element id }
  var el1 = document.getElementById(mid);
  var el2 = document.getElementById(cid);
  var colorArr = [
    ["aqua", "#00FFFF"],
    ["black", "#000000"],
    ["blue", "#0000FF"],
    ["fuchsia", "#FF00FF"],
    ["gray", "#808080"],
    ["green", "#008000"],
    ["lime", "#00FF00"],
    ["maroon", "#800000"],
    ["navy", "#000080"],
    ["olive", "#808000"],
    ["purple", "#800080"],
    ["red", "#FF0000"],
    ["silver", "#C0C0C0"],
    ["teal", "#008080"],
    ["white", "#FFFFFF"],
    ["yellow", "#FFFF00"]
  ];
  for(i = 0; i < colorArr.length; i++) {
    if(el2.style.backgroundColor.toLowerCase() == colorArr[i][0]) { // checks for color name
      el1.value = colorArr[i][1]; // sets value in textbox
	  return; // exits function
    }
  }
  el1.value = el2.style.backgroundColor;
};
var i = 5;
var x = setInterval(f("textbox_id", "cell_id"), i);

Ththththththat's all, folks! If you have anymore questions, which I believe you shall have, ask them with no fear or remorse

And: do you mind telling us what this is actually going to be used for? Thanks!

[la79]

Hi!

Thanks for all your hardwork and help. It's actually for a website I was creating. To give the website a look I wanted to find the hex color upon loading of the page based on the table or cell's css class or id. Upon more research I found the DOM's document write function.

I actually was able to come up with some code after researching quite a bit. I'm a newcomer to javascript and so I don't know much about it. The problem is I wasn't able to pull the information from the css. The only thing I was able to come up with was pulling the bgcolor of the actual table or cell.

Check this out:

<HTML>
<head>
<title>this is a title</title>

</head>

<style type="text/css">
.tablebckground{
	background:#0066CC; <!--You have to make the background the same color as the object the text lies in to not have a box around it -->
}
</style>


<BODY bgcolor="#FFFFFF">

<table width="200">
  <tr>
    <td bgcolor="#990066" id="mytable">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#00FF00">&nbsp;</td>
  </tr>
</table>

<script language="JavaScript">

document.write("<div class='tablebckground'>");
document.write("RGB "+document.getElementById("mytable").bgColor+"");
document.write("</div>");

</script>
    
</BODY>

</HTML>

So you see I am almost there but not quite. I think after studying your code I may be able to come up with it. The only problem I'm running into is using the document.write and document.bgColor to pull the bgcolor from the style sheet as opposed to the code in the html tag...