Solved

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!

Posted on 2010-08-22
18
434 Views
Last Modified: 2013-11-19
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
Comment
Question by:Octalys
  • 5
  • 4
  • 4
  • +2
18 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 
LVL 5

Expert Comment

by:ploftin
Comment Utility
Enclose the cell1 reference in quotes.

var rNumber = document.getElementById("cell1");
0
 

Author Comment

by:Octalys
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
'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
 

Author Comment

by:Octalys
Comment Utility
Hi DaveBaldwin,

Yes I noticed that, so is there a way to get the backgroundColor using another way?
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
Try this:


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

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 166 total points
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 5

Accepted Solution

by:
ploftin earned 167 total points
Comment Utility
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
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I found "window.getComputedStyle()" but it isn't supported well.  Here's some info about it: http://www.quirksmode.org/dom/getstyles.html
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 167 total points
Comment Utility
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
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
You explicitly set the background colors in your DIV declarations - I wonder if Octalys also did this?
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Comment

by:Octalys
Comment Utility
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
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
 

Author Closing Comment

by:Octalys
Comment Utility
thx
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
No worries - glad to help.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now