javascript style.visibility doesn't seem to work....

Question

In my aspx page i have a tr which is set visible="false" by default... But on a selected index of a dropdown i make it visible="true" ..... On the form submit i am validating the control within the tr but couldn't find whether the tr is visinle or not using javascript...

My aspx:

<tr id="MeasurementTr" runat="server" visible="false">
<td>
 &nbsp;</td>
 <td class="table_label">
   Measurement</td>
  <td>
    &nbsp;</td>
   <td>
   <asp:DropDownList ID="DlMeasurement" runat="server">
   </asp:DropDownList>
  </td>
  <td>
  &nbsp;</td>
   </tr>           

and my javascript,

 alert(document.getElementById("ctl00_ContentPlaceHolder1_MeasurementTr").style.visibility);
 if (document.getElementById("ctl00_ContentPlaceHolder1_MeasurementTr").style.visibility=="visible"){
     if (document.getElementById("ctl00_ContentPlaceHolder1_DlMeasurement").selectedIndex == 0) {
         document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Measurement";
         document.getElementById("ctl00_ContentPlaceHolder1_DlMeasurement").focus();
         return false;
     }
 }

But my alert shows nothing... It didnt show null or undefined...

Answer 1

The visible property can take the values hidden, visible or collapse.

true and false are invalid CSS.

The .style.* properties represent inline CSS (as specified in the style attribute). If you set a value using a stylesheet, that will not be reflected in the .style.* on the element.

As a rule of thumb, you are usually better off modifying .className.