Microsoft AJAX Library Cheat Sheet（3）：DomElement類

 

本文為翻譯，英文原版的Cheat Sheet（PDF版本）在此下載：http://aspnetresources.com/downloads/ms_ajax_library_cheat_sheets1.zip

原作著作權聲明：

Copyright (c) 2004-2006, Milan Negovanhttp://www.AspNetResources.comAll rights reserved.Redistribution and use in source and binary forms, with or withoutmodification, are permitted provided that the following conditionsare met:* Redistributions of source code must retain the above copyrightnotice, this list of conditions and the following disclaimer.* Redistributions in binary form must reproduce the above copyrightnotice, this list of conditions and the following disclaimer inthe documentation and/or other materials provided with thedistribution.* The name of the author may not be used to endorse or promote productsderived from this software without specific prior written permission.THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITEDTO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULARPURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER ORCONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OROTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IFADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

 

註：標註有[S]的為靜態方法，無須執行個體化對象即可使用。

 

[S] getElementById (id, element)

在element所包含的元素中搜尋特定id的元素，若不指定element，則預設為document。

var article = Sys.UI.DomElement.getElementById('article');

var heading = Sys.UI.DomElement.getElementById('heading', article)

// Note: 'article' is an instance of Sys.UI.DomElement

var btn = Sys.UI.DomElement.getElementById('<%= Submit.ClientID %>');

// Note: 'Submit' is an ASP.NET Button server control

 

[S] $get (id, element)

Sys.UI.DomElement.getElementById的簡寫形式。

var article = $get('article');

var heading = $get('heading', article)

// Note: 'article' is an instance of Sys.UI.DomElement

var btn = $get('<%= Submit.ClientID %>');

// Note: 'Submit' is an ASP.NET Button server control

 

[S] addCssClass (element, className)

將指定的CSS Class應用至該元素。

Sys.UI.DomElement.addCssClass($get('heading'), 'highlight');

 

[S] containsCssClass (element, className)

判斷該元素是否應用了指定的CSS Class。

var heading = $get('heading', article)

var isHighlighted = Sys.UI.DomElement.containsCssClass(heading, 'highlight');

 

[S] removeCssClass (element, className)

從該元素中移除指定的CSS Class。

var heading = $get('heading', article)

Sys.UI.DomElement. removeCssClass (heading, 'highlight');

 

[S] toggleCssClass (element, className)

若元素已經應用了該CSS Class，則將其移除；否則添加。

var heading = $get('heading', article)

var isHighlighted = Sys.UI.DomElement.toggleCssClass(heading, 'highlight');

 

[S] getLocation (element)

取得元素相對於瀏覽器左上方的絕對位置，滾動出頁面可見地區之外的距離也計算在內。

var article = $get('article');

var position = Sys.UI.DomElement.getLocation(article);

var x = position.x, y = position.y;

 

[S] setLocation (element, x, y)

設定元素相對於其定位元素左上方的位置。定位元素是指元素最近的應用了position（非static值）的祖先元素。

var menu = $get('menu');

Sys.UI.DomElement.setLocation(menu, 200, 50);

 

[S] getBounds (element)

取得元素的絕對位置以及其長寬，傳回值對象包括如下幾個屬性：

1. x, y：取得元素相對於瀏覽器左上方的絕對位置，與Sys.UI.DomElement.getLocation()一樣。
2. width：元素的寬度，包括border、padding以及滾動部分。
3. height：元素的高度，包括border、padding以及滾動部分。

var article = $get('article');

var bounds = Sys.UI.DomElement.getBounds (article);

Sys.Debug.traceDump (bounds, 'Article position and size');

/*

Article position and size {Sys.UI.Bounds}

x: 50

y: 200

height: 268

width: 368

*/

注意到其中寬度和高度均包含border、padding以及滾動部分。所以對於一個300 * 200像素、20像素border、14像素padding的元素來說，其“寬度”和“高度”將為368 * 268像素。