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 类。