Get control properties with javascript in firefox

Question

I'm trying to access control's properties and although it works great in IE6, in FF3, it fails. Im doing:

alert(document.getElementById(gridViewCtlId).style.display);
 alert(document.getElementById(gridViewCtlId).style);

And the first one shows a blank popup while the second shows 'undefined'.

I do alert(document.getElementById(gridViewCtlId).id);

and i get the proper ID of the box along with: alert(document.getElementById(gridViewCtlId));

and I get that its an HTML table.

This works perfectly in IE but not FF. What do I need to do to get this functioning? Thanks.

Edit: gridViewCtlId is defined as:

var gridViewCtlId = '<%=GridView.ClientID%>';

Here is the full code:

var itemVisible= '<%=ItemVisible.ClientID%>';

function onGridViewRowSelected(rowIdx)
{
 alert(document.getElementById(gridViewCtlId).style.display);
 alert(document.getElementById(gridViewCtlId).style);
 if (document.getElementById(gridViewCtlId).disabled == false)
 {
  alert("hi1");
  var selRowCCA = getSelectedRow(rowIdx);
  if (curSelRow != null)
  { 
   alert("hi2");
   var previousRow = getSelectedRow(previousRowIndx);

   var CountIdx = previousRowIndx % 2;
   if (document.getElementById(itemVisible) == null)
   {
    if (CountIdx == 0)
    {
     alert("hi");
     previousRow.style.backgroundColor = 'Silver';
    }
    else
    {
     previousRow.style.backgroundColor = 'White';
    }
   }
  }

  if (null != selRow)
  {
   alert("new");
   previousRowIndx = rowIdx;
   curSelRow = selRow;
   selRow.style.backgroundColor = 'Red';
  }
 }
}

It's pretty much an onClick where I have it call that function to turn it back to its original color (using alternating color rows). IE, this works fine. If i do the first alert alert(document.getElementById(gridViewCtlId).disabled);

I would get either true or false. The reason it's like this is because someone is going to enter something in a text box and the first gridview is going to populate depending on whats in that textbox. Then when someone selected something in the first gridview, that gridview is going to become disabled and then populate a second. So i'm having an issue checking for the disabled part of the gridview.

Answer 1

<div id="test">
</div>
<script type="text/javascript">
var gridViewCtlIdCCA = 'test';
alert(document.getElementById(gridViewCtlIdCCA).style);
</script>

Alerts [object CSSStyleDefintion] in Firefox 2 and 3.

If .style where undefined, .style.display would produce an error, not alert an empty dialog (unless you are capturing window.onerror).

Can you create an SSCCE that demonstrates the problem. More information about SSCCE available here.