Sys.UI.DomElement Class

Article
2012-11-16

Defines static methods and properties that provide helper APIs for manipulating and inspecting DOM elements.

Namespace: Sys.UI

Inherits: None

var domElementVar = Sys.UI.DomElement.getElementById(strDomElementID)

Constructors

Name	Description
Sys.UI.DomElement Constructor	Initializes a new instance of the Sys.UI.DomElement class.

Members

Name	Description
Sys.UI.DomElement addCssClass Method	Adds a CSS class to a DOM element if the class is not already part of the DOM element.
Sys.UI.DomElement containsCssClass Method	Gets a value that indicates whether the DOM element contains the specified CSS class.
Sys.UI.DomElement $get Method	Provides a shortcut to the getElementById method of the Sys.UI.DomElement class
Sys.UI.DomElement getBounds Method	Gets a set of integer coordinates that represent the position, width, and height of a DOM element.
Sys.UI.DomElement getElementById Method	Gets a DOM element that has the specified id attribute.
Sys.UI.DomElement getLocation Method	Gets the absolute position of a DOM element relative to the upper-left corner of the owner frame or window.
Sys.UI.DomElement getVisibilityMode Method	Returns a value that represents the layout characteristics of a DOM element when it is hidden by invoking the Sys.UI.DomElement.setVisible method.
Sys.UI.DomElement getVisible Method	Gets a value that indicates whether a DOM element is currently visible on the Web page.
Sys.UI.DomElement removeCssClass Method	Removes a CSS class from a DOM element.
Sys.UI.DomElement setLocation Method	Sets the position of a DOM element.
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.
Sys.UI.DomElement setVisible Method	Sets a DOM element to be visible or hidden.
Sys.UI.DomElement toggleCssClass Method	Toggles a CSS class in a DOM element.

Remarks

You cannot instantiate the DomElement class.

Example

The following example shows how to use the DomElement class. As an alternative to adding the click handler to a button, you could add a pageLoad handler to the body element.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title>Example</title>
    <style type="text/css">
    .redBackgroundColor { 
      background-color:Red;
     }
    .blueBackgroundColor { 
      background-color:Green;
     }
    </style>
</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">
                   <b>DomElement Methods</b>
                   <br />
                   <asp:Button ID="Button1" runat="server" Text="Toggle CssClass" />
                   <asp:Button ID="Button2" runat="server" Text="Remove CssClass" />
                   <p></p>
                   <b>DomElement Properties</b>
                   <br />
                   <asp:Label ID="Label1" runat="server" BackColor="Black" ForeColor="White" Text="Label1" Width="102px"></asp:Label>
                   <br />
                   <asp:Label ID="Label2" runat="server"></asp:Label>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    // Add handler using the getElementById method
    $addHandler(Sys.UI.DomElement.getElementById("Button1"), "click", toggleCssClassMethod);
    // Add handler using the shortcut to the getElementById method
    $addHandler($get("Button2"), "click", removeCssClassMethod);

    // Add CSS class
    Sys.UI.DomElement.addCssClass($get("Button1"), "redBackgroundColor");
    Sys.UI.DomElement.addCssClass($get("Button2"), "blueBackgroundColor");

    // Method called when Button1 is clicked
    function toggleCssClassMethod(eventElement) {
       // Toggle CSS class
       Sys.UI.DomElement.toggleCssClass(eventElement.target, "redBackgroundColor");
    }

    // Method called when Button2 is clicked
    function removeCssClassMethod(eventElement) {
       // Remove CSS class
        Sys.UI.DomElement.removeCssClass(eventElement.target, "blueBackgroundColor");
    }


    // Get the bounds of the element
    var elementRef = $get("Label1");
    var elementBounds = Sys.UI.DomElement.getBounds(elementRef);
    var result = '';
    result += "Label1 bounds x = " + elementBounds.x + "<br/>";
    result += "Label1 bounds y = " + elementBounds.y + "<br/>";
    result += "Label1 bounds width = " + elementBounds.width + "<br/>";
    result += "Label1 bounds height = " + elementBounds.height + "<p/>";


    // Get the location of the element
    var elementLoc = Sys.UI.DomElement.getLocation(elementRef);
    result += "Before move - Label1 location (x,y) = (" + 
               elementLoc.x + "," + elementLoc.y + ")<br/>";
    // Move the element
    Sys.UI.DomElement.setLocation(elementRef, 100, elementLoc.y);
    elementLoc = Sys.UI.DomElement.getLocation(elementRef);
    result += "After move  - Label1 location (x,y) = (" + 
               elementLoc.x + "," + elementLoc.y + ")<br/>";

    // Prepare the results
    $get('Label2').innerHTML = result;
</script>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title>Example</title>
    <style type="text/css">
    .redBackgroundColor { 
      background-color:Red;
     }
    .blueBackgroundColor { 
      background-color:Green;
     }
    </style>
</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">
                   <b>DomElement Methods</b>
                   <br />
                   <asp:Button ID="Button1" runat="server" Text="Toggle CssClass" />
                   <asp:Button ID="Button2" runat="server" Text="Remove CssClass" />
                   <p></p>
                   <b>DomElement Properties</b>
                   <br />
                   <asp:Label ID="Label1" runat="server" BackColor="Black" ForeColor="White" Text="Label1" Width="102px"></asp:Label>
                   <br />
                   <asp:Label ID="Label2" runat="server"></asp:Label>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    // Add handler using the getElementById method
    $addHandler(Sys.UI.DomElement.getElementById("Button1"), "click", toggleCssClassMethod);
    // Add handler using the shortcut to the getElementById method
    $addHandler($get("Button2"), "click", removeCssClassMethod);

    // Add CSS class
    Sys.UI.DomElement.addCssClass($get("Button1"), "redBackgroundColor");
    Sys.UI.DomElement.addCssClass($get("Button2"), "blueBackgroundColor");

    // Method called when Button1 is clicked
    function toggleCssClassMethod(eventElement) {
       // Toggle CSS class
       Sys.UI.DomElement.toggleCssClass(eventElement.target, "redBackgroundColor");
    }

    // Method called when Button2 is clicked
    function removeCssClassMethod(eventElement) {
       // Remove CSS class
        Sys.UI.DomElement.removeCssClass(eventElement.target, "blueBackgroundColor");
    }


    // Get the bounds of the element 
    var elementRef = $get("Label1");
    var elementBounds = Sys.UI.DomElement.getBounds(elementRef);
    var result = '';
    result += "Label1 bounds x = " + elementBounds.x + "<br/>";
    result += "Label1 bounds y = " + elementBounds.y + "<br/>";
    result += "Label1 bounds width = " + elementBounds.width + "<br/>";
    result += "Label1 bounds height = " + elementBounds.height + "<p/>";


    // Get the location of the element 
    var elementLoc = Sys.UI.DomElement.getLocation(elementRef);
    result += "Before move - Label1 location (x,y) = (" + 
               elementLoc.x + "," + elementLoc.y + ")<br/>";
    // Move the element
    Sys.UI.DomElement.setLocation(elementRef, 100, elementLoc.y);
    elementLoc = Sys.UI.DomElement.getLocation(elementRef);
    result += "After move  - Label1 location (x,y) = (" + 
               elementLoc.x + "," + elementLoc.y + ")<br/>";

    // Prepare the results
    $get('Label2').innerHTML = result;
</script>

Share via

Sys.UI.DomElement Class

Constructors

Members

Remarks

Example

See Also

Reference

Other Resources

Additional resources