Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 459
  • Last Modified:

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!
0
Octalys
Asked:
Octalys
  • 5
  • 4
  • 4
  • +2
3 Solutions
 
Tom BeckCommented:
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.
0
 
ploftinCommented:
Enclose the cell1 reference in quotes.

var rNumber = document.getElementById("cell1");
0
 
OctalysAuthor Commented:
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".
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
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

0
 
Dave BaldwinFixer of ProblemsCommented:
'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
0
 
OctalysAuthor Commented:
Hi DaveBaldwin,

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


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

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
BadotzCommented:
But what if, just for the sake of argument, the Asker wants to know WHAT the color is CURRENTLY?

Are you saying there is no way to do that?
0
 
ploftinCommented:
Use CSS.  You can set AND get the className of the cell.
<td id="cell1" class="redBG">text</td>

<script language="javascript">
rNumber = document.getElementById("cell1");
alert('The cell is has a className called: ' + rNumber.className);
</script>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
I found "window.getComputedStyle()" but it isn't supported well.  Here's some info about it: http://www.quirksmode.org/dom/getstyles.html
0
 
Tom BeckCommented:
I uploaded a new version of my test. This one uses numbers as ids, which is supposed to be against the rules. It GETs background colors from elements and saves them in variables then applies the colors in the variables to SET the background color of another element. What am I missing here?

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

I listened to all the theory on this subject and read the rules cited. In the real world though, the theories and w3school rules do not seem to apply. I've tried this in four modern browsers.  Maybe the rule books need to be updated. If it works and it's not hurting anyone, why can't I use it?

Safari 4.0.5
Opera 10.60
Firefox 3.6.8
IE 8.0.6
0
 
BadotzCommented:
You explicitly set the background colors in your DIV declarations - I wonder if Octalys also did this?
0
 
Tom BeckCommented:
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?
0
 
OctalysAuthor Commented:
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.
0
 
Tom BeckCommented:
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?
0
 
OctalysAuthor Commented:
thx
0
 
BadotzCommented:
No worries - glad to help.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 4
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now