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(ce ll1);
var oldColor = rNumber.style.backgroundCo lor; <--- this doesnt work
rNumber.style.backgroundCo lor = 'yellow';
rNumber.style.backgroundCo lor = 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!
I am trying to save backgroundColor of a table cell so I can reuse it.
Something like this;
var rNumber = document.getElementById(ce
var oldColor = rNumber.style.backgroundCo
rNumber.style.backgroundCo
rNumber.style.backgroundCo
I spent too much time trying to solve this very minor thing, if anyone know how to do this. Thank you!
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("c ell1");
var rNumber = document.getElementById("c
ASKER
uh its not working here.
even if I use the id name directly or as a variable.
alert(document.getElementB yId("1").s tyle.backg roundColor );
this shows me nothing, and the id="1".
even if I use the id name directly or as a variable.
alert(document.getElementB
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;"> </td>
<td class="td"> </td>
<td class="td"> </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>
'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
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
ASKER
Hi DaveBaldwin,
Yes I noticed that, so is there a way to get the backgroundColor using another way?
Yes I noticed that, so is there a way to get the backgroundColor using another way?
Try this:
alert(document.getElementById("1").currentStyle.backgroundColor);
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I found "window.getComputedStyle() " but it isn't supported well. Here's some info about it: http://www.quirksmode.org/dom/getstyles.html
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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?
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.
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?
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?
ASKER
thx
No worries - glad to help.