Ajax Sys.UI.DomElement學習

中午無意中看到Sys.UI.DomElement，查了下資料原來是Ajax的，這裡貼出用法，也是網上看的資料。

 

 <form id="form1" runat="server">

<asp:scriptmanager runat="server"></asp:scriptmanager>//這個是必須的；因為他是ajax的；
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">//防止重新整理，不然無法看到效果。
    <ContentTemplate>
       <div>
      <asp:TextBox runat="server" ID="RedTxt" /><br />
       <asp:TextBox runat="server" ID="BlueTxt" /><br />
       <asp:Button runat="server" ID="btnClick"  Text="Remove Blue" /><br />
       <asp:Button runat="server" ID="btnContain"  Text="判斷樣式是否存在" /><br />
       <asp:Button runat="server" ID="btnToggle"  Text="點擊轉場樣式" /><br />
       <asp:Button runat="server" ID="btnEvent"  Text="點擊按鈕自身變換1" /><br />
       <asp:Button runat="server" ID="btnEvent2"  Text="點擊按鈕自身變換2" /><br />
    </div>
</ContentTemplate>
</asp:UpdatePanel>
</form>

 

<script language="javascript">
    //添加樣式--Sys.UI.DomElement.addCssClass
    Sys.UI.DomElement.addCssClass(Sys.UI.DomElement.getElementById("RedTxt"), "redBackgroundColor");
    Sys.UI.DomElement.addCssClass($get("BlueTxt"), "blueBackgroundColor");

    //點擊按鈕--$addHandler   刪除樣式--Sys.UI.DomElement.removeCssClass 註：click只能小寫，大寫試了不行。
    $addHandler($get("btnClick"), "click", function () {
        Sys.UI.DomElement.removeCssClass($get("BlueTxt"), "blueBackgroundColor");
    });

    //判斷樣式是否存在--Sys.UI.DomElement.containsCssClass
    $addHandler($get("btnContain"), "click", function () {
        if (Sys.UI.DomElement.containsCssClass($get("RedTxt"), "redBackgroundColor")) {
            Sys.UI.DomElement.addCssClass($get("RedTxt"), "blueBackgroundColor");
        }
    });

    //轉場樣式
    $addHandler($get("btnToggle"), "click", function () {
        Sys.UI.DomElement.toggleCssClass($get("RedTxt"), "redBackgroundColor");
    })

    //按鈕自身變換
    $addHandler($get("btnEvent"), "click", function (e) {
        Sys.UI.DomElement.toggleCssClass(e.target, "redBackgroundColor");
    })
    //
    //按鈕自身變換
    $addHandler($get("btnEvent2"), "click", togglefunction);
    function togglefunction(eventElement) {
        Sys.UI.DomElement.toggleCssClass(eventElement.target, "redBackgroundColor");
    }
</script>

 

這裡我唯寫出幾個用法，其它還有很多，這裡貼出來全部的方法

 

Sys.UI.DomElement addCssClass 方法	將 CSS 類添加到 DOM 元素（如果該類還不是該 DOM 元素的組成部分）。
Sys.UI.DomElement containsCssClass 方法	擷取一個值，該值指示 DOM 元素是否包含指定的 CSS 類。
Sys.UI.DomElement $get 方法	提供訪問 Sys.UI.DomElement 類的 getElementById 方法的捷徑。
Sys.UI.DomElement getBounds 方法	擷取一組整數座標，這些座標表示 DOM 元素的位置、寬度和高度。
Sys.UI.DomElement getElementById 方法	擷取一個 DOM 元素，該元素具有指定的 id 特性。
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 類。