Sys.UI.DomElement (Clase)

Artículo
10/07/2008

Actualización: noviembre 2007

Define los métodos estáticos y propiedades que proporcionan las API auxiliares para manipular e inspeccionar elementos DOM.

Espacio de nombres: Sys.UI

Hereda: nada

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

Constructores

Nombre	Descripción
Sys.UI.DomElement (Constructor)	Inicializa una nueva instancia de la clase Sys.UI.DomElement.

Members

Name	Descripción
Sys.UI.DomElement addCssClass (Método)	Agrega una clase CSS a un elemento DOM si la clase no forma parte todavía del elemento DOM.
Sys.UI.DomElement containsCssClass (Método)	Obtiene un valor que indica si el elemento DOM contiene la clase CSS especificada.
Sys.UI.DomElement $get (Método)	Proporciona un acceso directo al método getElementById de la clase Sys.UI.DomElement.
Sys.UI.DomElement getBounds (Método)	Obtiene un conjunto de coordenadas enteras que representan la posición, el ancho y el alto de un elemento DOM.
Sys.UI.DomElement getElementById (Método)	Obtiene un elemento DOM que tiene el atributo id especificado.
Sys.UI.DomElement getLocation (Método)	Obtiene la posición absoluta de un elemento DOM respecto a la esquina superior izquierda del marco propietario o ventana.
Sys.UI.DomElement getVisibilityMode (Método)	Devuelve un valor que representa las características de diseño de un elemento DOM cuando se oculta invocando el método Sys.UI.DomElement.setVisible.
Sys.UI.DomElement getVisible (Método)	Obtiene un valor que indica si un elemento DOM está actualmente visible en la página web.
Sys.UI.DomElement removeCssClass (Método)	Quita una clase CSS de un elemento DOM.
Sys.UI.DomElement setLocation (Método)	Establece la posición de un elemento DOM.
Sys.UI.DomElement setVisibilityMode (Método)	Establece las características de diseño de un elemento de DOM cuando está oculto invocando el método Sys.UI.DomElement.setVisible.
Sys.UI.DomElement setVisible (Método)	Establece un elemento DOM para que esté visible u oculto.
Sys.UI.DomElement toggleCssClass (Método)	Activa o desactiva una clase CSS en un elemento DOM.

Comentarios

No se puede crear una instancia de la clase DomElement.

Ejemplo

En el ejemplo siguiente se muestra cómo usar la clase DomElement. En lugar de agregar el controlador click a un botón, podría agregar un controlador pageLoad al elemento body.

<%@ 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 (Clase)

Constructores

Members

Comentarios

Ejemplo

Vea también

Referencia

Otros recursos

Recursos adicionales