Ajax SYS. UI. domelement Learning

At noon, I accidentally saw SYS. UI. domelement. I checked the information that was originally Ajax. Here I posted the usage, which is also the information I read online.

 

<Form ID = "form1" runat = "server">

<Asp: scriptmanager runat = "server"> </ASP: scriptmanager> // This is required because it is Ajax;
<Asp: updatepanel id = "updatepanel1" runat = "server" childrenastriggers = "false" updatemode = "Conditional"> // prevents refresh. Otherwise, the effect cannot be seen.
<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 = "determine whether a style exists"/> <br/>
<Asp: button runat = "server" id = "btntoggle" text = "click to switch the style"/> <br/>
<Asp: button runat = "server" id = "btnevent" text = "click the button to change itself 1"/> <br/>
<Asp: button runat = "server" id = "btnevent2" text = "click the button to change itself 2"/> <br/>
</Div>
</Contenttemplate>
</ASP: updatepanel>
</Form>

 

<Script language = "JavaScript">
// Add a style -- SYS. UI. domelement. addcssclass
SYS. UI. domelement. addcssclass (SYS. UI. domelement. getelementbyid ("redtxt"), "redbackgroundcolor ");
SYS. UI. domelement. addcssclass ($ get ("bluetxt"), "bluebackgroundcolor ");

// Click the button -- $ addhandler to delete the style -- SYS. UI. domelement. removecssclass. Note: Click can only be in lower case and cannot be used in upper case.
$ Addhandler ($ get ("btnclick"), "click", function (){
SYS. UI. domelement. removecssclass ($ get ("bluetxt"), "bluebackgroundcolor ");
});

// Determine whether a style exists -- SYS. UI. domelement. containscssclass
$ Addhandler ($ get ("btncontain"), "click", function (){
If (SYS. UI. domelement. containscssclass ($ get ("redtxt"), "redbackgroundcolor ")){
SYS. UI. domelement. addcssclass ($ get ("redtxt"), "bluebackgroundcolor ");
}
});

// Switch the style
$ Addhandler ($ get ("btntoggle"), "click", function (){
SYS. UI. domelement. togglecssclass ($ get ("redtxt"), "redbackgroundcolor ");
})

// Button self-transformation
$ Addhandler ($ get ("btnevent"), "click", function (e ){
Sys.ui.domelement.togglecssclass(e.tar get, "redbackgroundcolor ");
})
//
// Button self-transformation
$ Addhandler ($ get ("btnevent2"), "click", togglefunction );
Function togglefunction (eventelement ){
Sys.ui.domelement.togglecssclass(eventelement.tar get, "redbackgroundcolor ");
}
</SCRIPT>

 

Here I only write a few usage items, and there are many others. I will post all the methods here.

 

SYS. UI. domelement addcssclass Method	Add the CSS class to the DOM element (if the class is not part of the DOM element ).
SYS. UI. domelement containscssclass Method	Gets a value indicating whether the DOM element contains the specified CSS class.
SYS. UI. domelement $ get Method	Provides a shortcut to access the getelementbyid method of the SYS. UI. domelement class.
SYS. UI. domelement getbounds Method	Obtains a set of integer coordinates, which indicate the position, width, and height of the DOM element.
SYS. UI. domelement getelementbyid Method	Gets a DOM element with the specifiedIDFeatures.
SYS. UI. domelement getlocation Method	Obtain the absolute position of the DOM element (relative to the owner frame or the upper left corner of the window ).
SYS. UI. domelement getvisibilitymode Method	Returns a value indicating the layout feature of the element when the DOM element is hidden by calling sys. UI. domelement. setvisible.
SYS. UI. domelement getvisible Method	Gets a value indicating whether the DOM element is currently visible on the webpage.
SYS. UI. domelement removecssclass Method	Remove the CSS class from the DOM element.
SYS. UI. domelement setlocation Method	Set the DOM element position.
SYS. UI. domelement setvisibilitymode Method	Sets the layout feature of the element when the DOM element is hidden by calling sys. UI. domelement. setvisible.
SYS. UI. domelement setvisible Method	Set the DOM element to visible or hidden.
SYS. UI. domelement togglecssclass method	switch the CSS class in the DOM element.