Sys.UI.DomElement 클래스
업데이트: 2007년 11월
DOM 요소를 조작하고 검사하기 위해 도우미 API를 제공하는 정적 메서드 및 속성을 정의합니다.
네임스페이스: Sys.UI
상속: 없음
var domElementVar = Sys.UI.DomElement.getElementById(strDomElementID)
생성자
이름 |
설명 |
|---|---|
Sys.UI.DomElement 클래스의 새 인스턴스를 초기화합니다. |
멤버
이름 |
설명 |
|---|---|
CSS 클래스가 DOM 요소에 포함되어 있지 않은 경우 클래스를 DOM 요소에 추가합니다. |
|
지정된 CSS 클래스가 DOM 요소에 포함되어 있는지 여부를 나타내는 값을 가져옵니다. |
|
Sys.UI.DomElement 클래스의 getElementById 메서드에 대한 바로 가기를 제공합니다. |
|
DOM 요소의 위치, 너비 및 높이를 나타내는 정수 좌표 집합을 가져옵니다. |
|
지정된 id 특성을 포함하는 DOM 요소를 가져옵니다. |
|
소유자 프레임 또는 창의 왼쪽 맨 위를 기준으로 DOM 요소의 절대 위치를 가져옵니다. |
|
Sys.UI.DomElement.setVisible 메서드를 호출하여 DOM 요소를 숨긴 경우 해당 요소의 레이아웃 특성을 나타내는 값을 반환합니다. |
|
DOM 요소가 현재 웹 페이지에 표시되는지 여부를 나타내는 값을 가져옵니다. |
|
DOM 요소에서 CSS 클래스를 제거합니다. |
|
DOM 요소의 위치를 설정합니다. |
|
Sys.UI.DomElement.setVisible 메서드를 호출하여 DOM 요소를 숨긴 경우 해당 요소의 레이아웃 특성을 설정합니다. |
|
DOM 요소의 표시 여부를 설정합니다. |
|
DOM 요소에서 CSS 클래스 사용을 설정/해제합니다. |
설명
DomElement 클래스는 인스턴스화할 수 없습니다.
예제
다음 예제에서는 DomElement 클래스를 사용하는 방법을 보여 줍니다. click 처리기를 단추에 추가하는 대신 pageLoad 처리기를 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>