Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

How can I read the current background color

Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#1: Jul 6 '09
I stream out a report with alternating white and light grey background colors in the table elements.

I am using ajax to update the content of a table and I use the response text to adjust the text decoration and the color of the text. But my problem is this. The background color of the element is also changed even though I did not specify that it get changed. (I am using firefox only)

My thought was then, I want to read the background color before I alter the text and then set the background color to that value.

In the example below how can I first determine if the line that is being changed has the white or light grey background so I can use that to reset the background color?

Expand|Select|Wrap|Line Numbers
  1. elem.setAttribute('style','color: red; text-decoration: line-through; background-color: ?????;');
  2.  

drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,571
#2: Jul 6 '09

re: How can I read the current background color

This is not a HTML/CSS question and should be moved to the Javascript board.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Jul 6 '09

re: How can I read the current background color

Moved.

How are you updating the content of the table? It shouldn't change the background colour. Anyway, to get the background colour:
Expand|Select|Wrap|Line Numbers
  1. elem.style.backgroundColor
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#4: Jul 9 '09

re: How can I read the current background color

Quote:

Originally Posted by acoder View Post

Moved.

How are you updating the content of the table? It shouldn't change the background colour. Anyway, to get the background colour:

Expand|Select|Wrap|Line Numbers
  1. elem.style.backgroundColor

The short answer is see: parseResults() function at the bottom of this message. But I have given you the entire flow

1. How I stream out the page from the server

2. How the user can change the status of a contact.

3. my ajax call which goes out to make the change and comes back to update the color of the text of the name of the person's status that was changed.

On my server side scripting I use the variable "wkRowBgColor" to alternate the color of each line like this

Expand|Select|Wrap|Line Numbers
  1.  
  2.          puts([   <td])
  3.          puts([    id="name_]+c["CONTACTKEY"].value+["])
  4.          puts([       nowrap="nowrap"])
  5.          puts([    style="background-color:]+wkRowBgColor+[;"])
  6.          puts([   >]+ cValue +[</td>])
  7.  
  8.  
I do not want to change the line background color, but when I update (change the color of the text) to indicate the status has changed then the background color also changes.

In the column next to the name on the table are 3 radio buttons which when clicked calls the changeStatus() function:
Expand|Select|Wrap|Line Numbers
  1. puts([   <td])
  2. puts([    id="attr_]+c["CONTACTKEY"].value+["])
  3. puts([       nowrap="nowrap"])
  4. puts([    style="background-color:]+wkRowBgColor+[;"])
  5. puts([   >])
  6. puts([Export]+;
  7.     [<input ]+; 
  8.           [type="radio" ]+; 
  9.        [id="exp_]+c["CONTACTKEY"].value+["]+;
  10.           [name="]+c["CONTACTKEY"].value+[" ]+; 
  11.           [value="Save" ]+;
  12.           [onclick="changeStatus(this);"]+;
  13.           [ checked ]+;
  14.         [/> ]+;
  15.         [Remove from list ]+;
  16.         [<input  ]+;
  17.            [type="radio" ]+;
  18.       [id="rem_]+c["CONTACTKEY"].value+["]+;
  19.       [name="]+c["CONTACTKEY"].value+[" ]+;
  20.           [value="Delete" ]+;
  21.           [onclick="changeStatus(this);"]+;
  22.     [/>]+;
  23.     [Delete From Company ]+;
  24.     [<input ]+;
  25.       [type="radio" ]+;
  26.           [id="del_]+c["CONTACTKEY"].value+["]+;
  27.       [name="]+c["CONTACTKEY"].value+[" ]+; 
  28.       [value="RemoveFromCompany" ]+;
  29.           [onclick="changeStatus(this);"]+;
  30.        [/>]+;
  31.    [</td>])
  32.  
Then here is my ajax call that updates the table after the status has changed.
Expand|Select|Wrap|Line Numbers
  1. var xmlHttp;
  2.  
  3. function createXMLHttpRequest() {  
  4.   if (window.ActiveXObject) {
  5.       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  6.   }else if (window.XMLHttpRequest) {
  7.       xmlHttp = new XMLHttpRequest();
  8.   }
  9. }
  10.  
  11. function changeStatus(obj)
  12. {
  13.     var cKey = obj.id.substring(4);
  14.     var cAction = obj.id.substring(0,4);
  15.     var cLocation = document.getElementById("wkWhere").value.substring(3,13);
  16.  
  17.     createXMLHttpRequest();
  18.     var url = "Process.exe?timeStamp=" + new Date().getTime();
  19.     var queryString = createQueryString(cKey, cAction, cLocation) + "&method=POST";
  20.     xmlHttp.onreadystatechange = handleStateChange;
  21.     xmlHttp.open("POST", url, true);
  22.     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  23.     xmlHttp.send(queryString);
  24. }
  25.  
  26. function createQueryString(cKey, cAction, cLocation) {
  27.     var queryString  = "CONTACTKEY=" + cKey;
  28.         queryString += "&action=" + cAction;
  29.         queryString += "&location=" + cLocation;
  30.     return queryString;
  31. }
  32.  
  33. function handleStateChange() {
  34.    if (xmlHttp.readyState == 4) {
  35.       if (xmlHttp.status == 200) {
  36.          parseResults();
  37.       }
  38.    }
  39. }
  40.  
  41. function parseResults() {
  42.  
  43.    var returnedString = xmlHttp.responseText;
  44.    var aReturn = new Array();
  45.  
  46.    aReturn = returnedString.split(';');
  47.  
  48.   if ( aReturn[0] == "An error occured") { 
  49.      eAlert  = aReturn[0]+"\n"
  50.  
  51.      if ( aReturn[1] == "Invalid client Id") { 
  52.         eAlert += aReturn[1]+" "+document.getElementById("ID").value+"\n"
  53.      }else{ 
  54.         eAlert += aReturn[1]+"\n"
  55.      }
  56.  
  57.      eAlert += aReturn[2]+"\n"
  58.      eAlert += aReturn[3]
  59.      alert( eAlert );
  60.   }else{ 
  61.     var elem = document.getElementById(aReturn[0]) ;
  62.     if (aReturn[1] == 'deleted')
  63.     {
  64.         elem.setAttribute('style','color: red; text-decoration: line-through;');
  65.         document.getElementById(aReturn[2]).innerHTML = "deleted" ;
  66.     }else{
  67.         if (aReturn[1] == 'F')
  68.         {
  69.             elem.setAttribute('style','color: green; text-decoration: line-through; ');
  70.         }else{
  71.             elem.setAttribute('style','color: black; text-decoration: none;');
  72.         }
  73.     }
  74.   }
  75. }
  76.  
As you can see by parseResults() function all I change is the text color, but it seems like the background color of the cell inherits the background color of the form outside the table, even though I did not touch that attribute.

My question really though was - Is it possible with my javaScript to read the current line's background color, save it to a variable, then update the background color after I make the text color change?

The problem is I don't know if the change is occurring to a white or light grey background color.
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#5: Jul 9 '09

re: How can I read the current background color

Quote:

Originally Posted by acoder View Post

Moved.

How are you updating the content of the table? It shouldn't change the background colour. Anyway, to get the background colour:

Expand|Select|Wrap|Line Numbers
  1. elem.style.backgroundColor


I tried your suggestion like this:
Expand|Select|Wrap|Line Numbers
  1. function changeStatus(obj)
  2. {
  3.   var chkColor = obj.style.backgroundColor;
  4.   alert(chkColor);
  5.  
  6.     var cKey = obj.id.substring(4);
  7.     var cAction = obj.id.substring(0,4);
  8.     var cLocation = document.getElementById("wkWhere").value.substring(3,13);
  9.  
  10.  
And it did not return any message in the alert.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Jul 9 '09

re: How can I read the current background color

I think the problem is that you're resetting the style when you set the style attribute, so what you should do is just set the properties required:
Expand|Select|Wrap|Line Numbers
  1. elem.style.color="green";
  2. elem.style.textDecoration="line-through";
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 173
#7: Jul 9 '09

re: How can I read the current background color

Quote:

Originally Posted by acoder View Post

I think the problem is that you're resetting the style when you set the style attribute, so what you should do is just set the properties required:

Expand|Select|Wrap|Line Numbers
  1. elem.style.color="green";
  2. elem.style.textDecoration="line-through";

Thank you very much. That worked perfectly.


Although I do not need it anymore, I am still wondering can you read the background color of an element?
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Jul 9 '09

re: How can I read the current background color

Yes, you can. If the background colour has been specified inline:
Expand|Select|Wrap|Line Numbers
  1. <td ... style="background-color:...">
then you can use what I posted earlier, i.e.
Expand|Select|Wrap|Line Numbers
  1. elem.style.backgroundColor
but if it was via a stylesheet, then you'd have to use getComputedStyle (for standards-compliant browsers) and currentStyle for IE.
rnd me's Avatar
Expert
  
Join Date: Jun 2007
Location: Urbana IL
Posts: 411
#9: Jul 9 '09

re: How can I read the current background color

Quote:

Originally Posted by Claus Mygind View Post

Thank you very much. That worked perfectly.


Although I do not need it anymore, I am still wondering can you read the background color of an element?

Expand|Select|Wrap|Line Numbers
  1. function getstyle(obj, cAttribute) {
  2.     if (obj.currentStyle) {
  3.       this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
  4.     } else {
  5.       this.getstyle = function (obj, cAttribute) {return D.defaultView.getComputedStyle(obj, null)[cAttribute];};
  6.     }
  7.     return getstyle(obj, cAttribute);
  8. }
  9.  
example:
Expand|Select|Wrap|Line Numbers
  1. alert(getstyle(document.body, "color"));
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,449 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved