Home > Developer > JavaScript

Different performance of javascript setAttribute and getAttribute on different browsers

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Test Environment (client browser)
IE6, IE7, IE8 compatible mode, IE8
Firefox 3.6.8, google chrome 5.0.375.125

The standard definitions of the two functions are described first.
ElementNode. setAttribute (name, value)
Name is required. Specifies the attribute name to be set.
Value is required. Specifies the attribute value to be set.
This method sets the specified attribute to the specified value. If no property with the specified name exists, this method creates a new property.

ElementNode. getAttribute (name)
Name is required. Specifies the attribute from which the attribute value is obtained.

I. setAttribute Problems
ElementNode is <tr>... </tr>

You want to add an event handler function for the row to be clicked,
Statement 1:
Table1row1. setAttribute ("onclick", "selectrow1 (this )");
IE8, Firefox, and google chrome correctly trigger the click Event
IE6 and IE7 cannot trigger the click event.
Statement 2:
Table2row1. onclick = function () {selectrow2 (this )};
All test browsers can trigger click events

Therefore, in order to be compatible with different IE, we can use the following statement in a unified manner.
Table2row1. onclick = function () {selectrow2 (this )};

2. getAttribute Problems
ElementNode is <tr>... </tr>
Set attributes first with setAttribute
Table1row1. setAttribute ("level", 1 );
Use getAttribute to obtain the tag attribute value.
Var level = table1row1. getAttribute ("level ");
Alert ("table1row1 level:" + level + "\ r \ ntypeof (level) =" + (typeof (level). toString ());
Display in IE6, 7

Table1row1 level: 1
Typeof (level) = number

In IE8, Firefox, and google chrome


Table1row1 level: 1
Typeof (level) = string
To handle these two cases in a unified manner, the Code is as follows:Copy codeThe Code is as follows: var level = table1row1. getAttribute ("level ");
If (level = undefined | level = null ){
Level = "0 ";
}
Level = level. toString ();
If (level. trim () = ""){
Level = "0 ";
}


Or use the ajax method.
$ AddHandler is the shortcut of Sys. UI. DomEvent. addHandler. Its syntax is:
$ AddHandler (element, eventName, handler );
Element exposes the DOM element of an event.
The name of the eventName event.
The event handler to be added by handler.
The preceding statement can be written as follows:
$ AddHandler (row, "click", function () {selectrow (this )});
The following is the html code for testing.Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Test </title>
<Script type = "text/javascript" language = "javascript">
Function pageLoad (){
Var table1row1 = document. getElementById ("table1row1 ");
Table1row1. setAttribute ("level", 1 );
Table1row1. setAttribute ("onclick", "selectrow1 (this )");
Var table1row2 = document. getElementById ("table1row2 ");
Table1row2. setAttribute ("level", 2 );
Table1row2. setAttribute ("onclick", "selectrow1 (this )");
Var table2row1 = document. getElementById ("table2row1 ");
Table2row1. setAttribute ("level", 3 );
Table2row1. onclick = function () {selectrow2 (this )};
Var table2row2 = document. getElementById ("table2row2 ");
Table2row2. setAttribute ("level", 4 );
Table2row2. onclick = function () {selectrow2 (this )};
}
Var CurrentSelectRow1 = null;
Function selectrow1 (newSelectRow ){
If (CurrentSelectRow1! = Null ){
CurrentSelectRow1.style. backgroundColor = '# ffff ';
}
NewSelectRow. style. backgroundColor = 'peachpuff ';
CurrentSelectRow1 = newSelectRow;
}
Var CurrentSelectRow2 = null;
Function selectrow2 (newSelectRow ){
If (CurrentSelectRow2! = Null ){
CurrentSelectRow2.style. backgroundColor = '# ffff ';
}
NewSelectRow. style. backgroundColor = '# ff0000 ';
CurrentSelectRow2 = newSelectRow;
}
Function button#click (){
Var table1row1 = document. getElementById ("table1row1 ");
Var level = table1row1. getAttribute ("level ");
Var desc1 = "table1row1 level:" + level + "\ r \ ntypeof (level) =" + (typeof (level). toString ();
Alert (desc1 );
Var onclick1 = table1row1. getAttribute ("onclick ");
Var desc2 = "table1row1 onclick:" + onclick1.toString () + "\ r \ ntypeof (onclick) =" + (typeof (onclick1). toString ();
Alert (desc2 );
}
Function button2_click (){
Var table2row1 = document. getElementById ("table2row1 ");
Var level = table2row1. getAttribute ("level ");
Var desc1 = "table2row1 level:" + level + "\ r \ ntypeof (level) =" + (typeof (level). toString ();
Alert (desc1 );
Var onclick1 = table2row1. onclick;
Var desc2 = "table2row1 onclick:" + onclick1.toString () + "\ r \ ntypeof (onclick) =" + (typeof (onclick1). toString ();
Alert (desc2 );
}
</Script>
</Head>
<Body onload = "pageLoad ();">
<Div style = "width: 600px">
<Span> table1 </span>
<Table cellspacing = "0" rules = "all" border = "1" id = "table1" style = "border-width: 1px;
Border-style: Solid; width: 100%; border-collapse: collapse; ">
<Tr id = "table1row0">
<Td align = "center" style = "width: 50%;">
No.
</Td>
<Td align = "center" style = "width: 50%;">
Item
</Td>
</Tr>
<Tr id = "table1row1">
<Td align = "center" style = "width: 50%;">
1
</Td>
<Td align = "left" style = "width: 50%;">
2C. 40E80. 041
</Td>
</Tr>
<Tr id = "table1row2">
<Td align = "center" style = "width: 50%;">
2
</Td>
<Td align = "left" style = "width: 50%;">
4L. 013Y2. 003
</Td>
</Tr>
</Table>
<Input type = "button" id = "button1" onclick = "return button#click ();"/>
</Div>
<Div style = "width: 600px">
<Br/>
<Span> table2 </span>
<Table cellspacing = "0" rules = "all" border = "1" id = "table2" style = "border-width: 1px;
Border-style: Solid; width: 100%; border-collapse: collapse; ">
<Tr id = "table2row0">
<Td align = "center" style = "width: 50%;">
No.
</Td>
<Td align = "center" style = "width: 50%;">
Item
</Td>
</Tr>
<Tr id = "table2row1">
<Td align = "center" style = "width: 50%;">
1
</Td>
<Td align = "left" style = "width: 50%;">
4G. 0QE18. 001
</Td>
</Tr>
<Tr id = "table2row2">
<Td align = "center" style = "width: 50%;">
2
</Td>
<Td align = "left" style = "width: 50%;">
2 K. 61209.208
</Td>
</Tr>
</Table>
<Input type = "button" id = "button2" onclick = "return button2_click ();"/>
</Div>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
list of different browsers different types of browsers why website look different on different browsers test website on different browsers different browsers test website in different browsers and platforms how to test website on different browsers

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More