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
446 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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 83

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 83

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 166 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 167 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 83

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 167 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

Independent Software Vendors: 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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

632 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