How can I read the current background color

[Claus Mygind]

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?

elem.setAttribute('style','color: red; text-decoration: line-through; background-color: ?????;');
 

[drhowarddrfine]

This is not a HTML/CSS question and should be moved to the Javascript board.

[acoder]

Moved.

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

elem.style.backgroundColor

[Claus Mygind]

@acoder
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

 
         puts([   <td])
         puts([    id="name_]+c["CONTACTKEY"].value+["])
         puts([       nowrap="nowrap"])
         puts([    style="background-color:]+wkRowBgColor+[;"])
         puts([   >]+ cValue +[</td>])
 
 

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:

puts([   <td])
puts([    id="attr_]+c["CONTACTKEY"].value+["])
puts([       nowrap="nowrap"])
puts([    style="background-color:]+wkRowBgColor+[;"])
puts([   >])
puts([Export]+;
    [<input ]+; 
          [type="radio" ]+; 
       [id="exp_]+c["CONTACTKEY"].value+["]+;
          [name="]+c["CONTACTKEY"].value+[" ]+; 
          [value="Save" ]+;
          [onclick="changeStatus(this);"]+;
          [ checked ]+;
        [/> ]+;
        [Remove from list ]+;
        [<input  ]+;
           [type="radio" ]+;
      [id="rem_]+c["CONTACTKEY"].value+["]+;
      [name="]+c["CONTACTKEY"].value+[" ]+;
          [value="Delete" ]+;
          [onclick="changeStatus(this);"]+;
    [/>]+;
    [Delete From Company ]+;
    [<input ]+;
      [type="radio" ]+;
          [id="del_]+c["CONTACTKEY"].value+["]+;
      [name="]+c["CONTACTKEY"].value+[" ]+; 
      [value="RemoveFromCompany" ]+;
          [onclick="changeStatus(this);"]+;
       [/>]+;
   [</td>])
 

Then here is my ajax call that updates the table after the status has changed.

var xmlHttp;
 
function createXMLHttpRequest() {  
  if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }else if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
  }
}
 
function changeStatus(obj)
{
    var cKey = obj.id.substring(4);
    var cAction = obj.id.substring(0,4);
    var cLocation = document.getElementById("wkWhere").value.substring(3,13);
 
    createXMLHttpRequest();
    var url = "Process.exe?timeStamp=" + new Date().getTime();
    var queryString = createQueryString(cKey, cAction, cLocation) + "&method=POST";
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(queryString);
}
 
function createQueryString(cKey, cAction, cLocation) {
    var queryString  = "CONTACTKEY=" + cKey;
        queryString += "&action=" + cAction;
        queryString += "&location=" + cLocation;
    return queryString;
}
 
function handleStateChange() {
   if (xmlHttp.readyState == 4) {
      if (xmlHttp.status == 200) {
         parseResults();
      }
   }
}
 
function parseResults() {
 
   var returnedString = xmlHttp.responseText;
   var aReturn = new Array();
 
   aReturn = returnedString.split(';');
 
  if ( aReturn[0] == "An error occured") { 
     eAlert  = aReturn[0]+"\n"
 
     if ( aReturn[1] == "Invalid client Id") { 
        eAlert += aReturn[1]+" "+document.getElementById("ID").value+"\n"
     }else{ 
        eAlert += aReturn[1]+"\n"
     }
 
     eAlert += aReturn[2]+"\n"
     eAlert += aReturn[3]
     alert( eAlert );
  }else{ 
    var elem = document.getElementById(aReturn[0]) ;
    if (aReturn[1] == 'deleted')
    {
        elem.setAttribute('style','color: red; text-decoration: line-through;');
        document.getElementById(aReturn[2]).innerHTML = "deleted" ;
    }else{
        if (aReturn[1] == 'F')
        {
            elem.setAttribute('style','color: green; text-decoration: line-through; ');
        }else{
            elem.setAttribute('style','color: black; text-decoration: none;');
        }
    }
  }
}
 

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]

@acoder

I tried your suggestion like this:

function changeStatus(obj)
{
  var chkColor = obj.style.backgroundColor;
  alert(chkColor);
 
    var cKey = obj.id.substring(4);
    var cAction = obj.id.substring(0,4);
    var cLocation = document.getElementById("wkWhere").value.substring(3,13);
 
 

And it did not return any message in the alert.

[acoder]

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:

elem.style.color="green";
elem.style.textDecoration="line-through";

[Claus Mygind]

@acoder
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]

Yes, you can. If the background colour has been specified inline:

<td ... style="background-color:...">

then you can use what I posted earlier, i.e.

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]

@Claus Mygind

function getstyle(obj, cAttribute) {
    if (obj.currentStyle) {
      this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
    } else {
      this.getstyle = function (obj, cAttribute) {return D.defaultView.getComputedStyle(obj, null)[cAttribute];};
    }
    return getstyle(obj, cAttribute);
}
 

example:

alert(getstyle(document.body, "color"));