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

How can I read the current background color

  #1  
Old July 6th, 2009, 05:42 PM
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 168
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.  
  #2  
Old July 6th, 2009, 05:59 PM
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,521

re: How can I read the current background color

This is not a HTML/CSS question and should be moved to the Javascript board.
  #3  
Old July 6th, 2009, 08:24 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,520
Provided Answers: 12

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
  #4  
Old July 9th, 2009, 01:31 PM
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 168

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.
  #5  
Old July 9th, 2009, 01:39 PM
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 168

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.
  #6  
Old July 9th, 2009, 02:02 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,520
Provided Answers: 12

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";
  #7  
Old July 9th, 2009, 03:37 PM
Claus Mygind's Avatar
Familiar Sight
  
Join Date: Mar 2008
Posts: 168

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?
  #8  
Old July 9th, 2009, 03:52 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,520
Provided Answers: 12

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.
  #9  
Old July 9th, 2009, 11:06 PM
rnd me's Avatar
Expert
  
Join Date: Jun 2007
Location: Urbana IL
Posts: 410

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 Threads
Thread Thread Starter Forum Replies Last Post
Background and non-auto-width questions Gérard Talbot answers 11 November 3rd, 2006 04:45 AM
Can't make this page work scottyman@comcast.net answers 6 March 9th, 2006 04:25 AM
How to modify the color according to background? Konrad Den Ende answers 11 July 23rd, 2005 12:53 PM
Color Code Vinod answers 19 July 22nd, 2005 02:54 AM

/bytes/development

/bytes/it

/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 225,662 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