Link to home
Start Free TrialLog in
Avatar of Octalys
Octalys

asked on

I am trying to save style.backgroundColor of a element in Javascript, typeof show me that it is a string but the string comes back empty. While element has a backgroundColor!

Hi,

I am trying to save backgroundColor of a table cell so I can reuse it.
Something like this;

var rNumber = document.getElementById(cell1);
var oldColor = rNumber.style.backgroundColor;    <--- this doesnt work
rNumber.style.backgroundColor = 'yellow';
rNumber.style.backgroundColor = oldColor;  <--- this doesnt work


I spent too much time trying to solve this very minor thing, if anyone know how to do this. Thank you!
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

If 'cell1' is the id of the table cell and not a variable, than it needs to be in quotes. It worked in my tests.
Enclose the cell1 reference in quotes.

var rNumber = document.getElementById("cell1");
Avatar of Octalys
Octalys

ASKER

uh its not working here.
even if I use the id name directly or as a variable.

                        alert(document.getElementById("1").style.backgroundColor);

this shows me nothing, and the id="1".
You could try my test?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>Untitled</title>
</head>
<body>
<table style="width:600px; height:200px; background-color:#0f0; border:#000 1px solid;" cellpadding="0" cellspacing="30">
    <tr>
	    <td class="td" id="cell1" style="background-color:Green;">&nbsp;</td>
	    <td class="td">&nbsp;</td>
	    <td class="td">&nbsp;</td>
	</tr>
</table>
<script language="javascript" type="text/javascript">
var rNumber = document.getElementById("cell1");
var oldColor = rNumber.style.backgroundColor;
alert(rNumber.style.backgroundColor);
rNumber.style.backgroundColor = 'yellow';
//rNumber.style.backgroundColor = oldColor;
</script>
</body>
</html>

Open in new window

'id' attributes must start with a letter, not a number.  http://www.w3schools.com/tags/att_standard_id.asp  

Also "background" attributes are 'set' only, you can't 'get' their values into a variable.  http://www.w3schools.com/jsref/dom_obj_style.asp#background
Avatar of Octalys

ASKER

Hi DaveBaldwin,

Yes I noticed that, so is there a way to get the backgroundColor using another way?
Try this:


alert(document.getElementById("1").currentStyle.backgroundColor);

Open in new window

Instead of trying to 'get' it, you can 'set' a variable in javascript and use that to change the color.  Use the variable to keep track of the current color instead of trying to read it which doesn't work.  Like below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#cell1 { background-color: #000000; }
#cell2 { background-color: #000000; }
-->
</style>
<script type="text/javascript">
<!--

function setfirst() {
rColor = '#ffff00';
bColor = '#00ff00';
rNumber = document.getElementById("cell1");
bNumber = document.getElementById("cell2");
rNumber.style.backgroundColor = rColor;
bNumber.style.backgroundColor = bColor;
}

function setnew() {
rColor = '#ff0000';
bColor = '#0000ff';
rNumber = document.getElementById("cell1");
bNumber = document.getElementById("cell2");
rNumber.style.backgroundColor = rColor;
bNumber.style.backgroundColor = bColor;
}

// -->
</script>

</head>
<body onload="setfirst()">

<div id="cell1">This was Green.</div>
<div id="cell2">This was Yellow.</div>
<button type="button" name="New" value="" onclick="setnew()">Change colors</button>

</body>
</html>

Open in new window

SOLUTION
Avatar of Badotz
Badotz
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I found "window.getComputedStyle()" but it isn't supported well.  Here's some info about it: http://www.quirksmode.org/dom/getstyles.html
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You explicitly set the background colors in your DIV declarations - I wonder if Octalys also did this?
Are there ANY block elements that have their background colors implicitly set or that have 'default' background colors? If you don't explicitly set the background color then there's obviously nothing to GET. Was this whole discussion about trying to GET an implied background color from a table cell?
Avatar of Octalys

ASKER

My elements gets their background colour from css classes, thats the difference with your example. I did the same but it didnt work thats why I started to wonder how people do this.

Going to take a look.
If that's the case, then @ploftin had the answer for you. Rather than "trying to save backgroundColor of a table cell so I can reuse it", why not just apply the css style for background-color from cell1 to cell2.
My sample updated:

http://www.bsatroop251.com/test4.htm

Or, are you trying to save the background color of a cell so you can apply it to something other than the background color of another block element?
Avatar of Octalys

ASKER

thx
No worries - glad to help.