Sys.UI.DomElement 클래스

DOM 요소를 조작하고 검사하기 위해 도우미 API를 제공하는 정적 메서드 및 속성을 정의합니다.

네임스페이스: Sys.UI

상속: 없음

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

Name

설명

Sys.UI.DomElement 생성자

Sys.UI.DomElement 클래스의 새 인스턴스를 초기화합니다.

Name

설명

Sys.UI.DomElement addCssClass 메서드

CSS 클래스가 DOM 요소에 포함되어 있지 않은 경우 클래스를 DOM 요소에 추가합니다.

Sys.UI.DomElement containsCssClass 메서드

지정된 CSS 클래스가 DOM 요소에 포함되어 있는지 여부를 나타내는 값을 가져옵니다.

Sys.UI.DomElement $get 메서드

Sys.UI.DomElement 클래스의 getElementById 메서드에 대한 바로 가기를 제공합니다.

Sys.UI.DomElement getBounds 메서드

DOM 요소의 위치, 너비 및 높이를 나타내는 정수 좌표 집합을 가져옵니다.

Sys.UI.DomElement getElementById 메서드

지정된 id 특성을 포함하는 DOM 요소를 가져옵니다.

Sys.UI.DomElement getLocation 메서드

소유자 프레임 또는 창의 왼쪽 맨 위를 기준으로 DOM 요소의 절대 위치를 가져옵니다.

Sys.UI.DomElement getVisibilityMode 메서드

Sys.UI.DomElement.setVisible 메서드를 호출하여 DOM 요소를 숨긴 경우 해당 요소의 레이아웃 특성을 나타내는 값을 반환합니다.

Sys.UI.DomElement getVisible 메서드

DOM 요소가 현재 웹 페이지에 표시되는지 여부를 나타내는 값을 가져옵니다.

Sys.UI.DomElement removeCssClass 메서드

DOM 요소에서 CSS 클래스를 제거합니다.

Sys.UI.DomElement setLocation 메서드

DOM 요소의 위치를 설정합니다.

Sys.UI.DomElement setVisibilityMode 메서드

Sys.UI.DomElement.setVisible 메서드를 호출하여 DOM 요소를 숨긴 경우 해당 요소의 레이아웃 특성을 설정합니다.

Sys.UI.DomElement setVisible 메서드

DOM 요소의 표시 여부를 설정합니다.

Sys.UI.DomElement toggleCssClass 메서드

DOM 요소에서 CSS 클래스 사용을 설정/해제합니다.

DomElement 클래스는 인스턴스화할 수 없습니다.

다음 예제에서는 DomElement 클래스를 사용하는 방법을 보여 줍니다. click 처리기를 단추에 추가하는 대신 pageLoad 처리기를 body 요소에 추가할 수도 있습니다.


<%@ 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>


표시: