Sys.UI.DomElement setVisibilityMode Method
Sets the layout characteristics of a DOM element when it is hidden by invoking the Sys.UI.DomElement.setVisible method. This member is static and can be invoked without creating an instance of the class.
Sys.UI.DomElement.setVisibilityMode(element, Sys.UI.VisibilityMode.hide);
Parameters
Term |
Definition |
|---|---|
element |
The target DOM element. |
value |
A Sys.UI.VisibilityMode enumeration value. |
Remarks
Use the setVisibilityMode method to set the layout characteristics of a DOM element when it is hidden by invoking the Sys.UI.DomElement.setVisible method. For example, if value is set to Sys.UI.VisibilityMode.collapse, the element uses no space on the page when the setVisible method is called to hide the element.
Example
The following example shows how to use the setVisibilityMode method.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example of setVisibilityMode Method</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"
EnableScriptGlobalization="true" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server"
ChildrenAsTriggers="False"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1"
runat="server"
GroupingText="Update Panel">
<br />
<asp:Label ID="Label1" runat="server"
BackColor="Blue"
ForeColor="White"
Text="Label1"></asp:Label>
<p></p>
<asp:Button ID="Button1"
runat="server"
Text="Toggle Visibility of Label1" />
<asp:Button ID="Button2"
runat="server"
Text="Toggle VisibilityMode of Label1" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<script type="text/javascript">
// Add handlers using the $get shortcut to the
// Sys.UI.DomElement.getElementById method
$addHandler($get("Button1"), "click", toggleVisible);
$addHandler($get("Button2"), "click", toggleVisibilityMode);
// This method is called when Button2 is clicked.
function toggleVisible() {
var anElement = $get("Label1");
if (Sys.UI.DomElement.getVisible(anElement)){
Sys.UI.DomElement.setVisible(anElement, false);
}
else{
Sys.UI.DomElement.setVisible(anElement, true);
}
}
// This method is called when Button1 is clicked.
function toggleVisibilityMode() {
var anElement = $get("Label1");
var visMode = Sys.UI.DomElement.getVisibilityMode(anElement);
var status = visMode
if (visMode === 0){
Sys.UI.DomElement.setVisibilityMode(anElement,
Sys.UI.VisibilityMode.collapse);
if (document.all)
{
anElement.innerText =
"Label1 VisibilityMode: Sys.UI.VisibilityMode.collapse";
}
else{
//Firefox
anElement.textContent =
"Label1 VisibilityMode: Sys.UI.VisibilityMode.collapse";
}
}
else{
Sys.UI.DomElement.setVisibilityMode(anElement,
Sys.UI.VisibilityMode.hide);
if (document.all)
{
anElement.innerText =
"Label1 VisibilityMode: Sys.UI.VisibilityMode.hide";
}
else{
//Firefox
anElement.textContent =
"Label1 VisibilityMode: Sys.UI.VisibilityMode.hide";
}
}
}
</script>