Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
454 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 4
  • +2
18 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33497261
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
ID: 33497277
Enclose the cell1 reference in quotes.

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

Author Comment

by:Octalys
ID: 33497311
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 33497333
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 84

Expert Comment

by:Dave Baldwin
ID: 33497369
'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
ID: 33497385
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
ID: 33497393
Try this:


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

Open in new window

0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 33497413
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 664 total points
ID: 33497891
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
 
LVL 5

Accepted Solution

by:
ploftin earned 668 total points
ID: 33498045
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 84

Expert Comment

by:Dave Baldwin
ID: 33498101
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 668 total points
ID: 33500122
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
ID: 33500254
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
ID: 33500432
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
ID: 33502252
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
ID: 33502843
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
ID: 33794595
thx
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33794624
No worries - glad to help.
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …

722 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