There are many differences between the setattribute of IE and the standard browser. You cannot use it to set the name attribute. You cannot set the type attribute after the element is added to the Dom, or use it to directly set inline event handlers ), you cannot use it to set styles ......
In IE6 and IE7, if an input element is dynamically generated, the name attribute cannot be set for it. Of course, this bug has been fixed in IE8. For details, see here. Because the name attribute is very important to form elements (when submitting a form, it forms a key-value pair with the Value Attribute and sends it to the background), you must pay attention to this bug.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var form = document. createelement ("form"); <br/> var input = document. createelement ("input"); <br/> var root = document. body; <br /> Input. setattribute ("name", "test"); <br/> root. appendchild (form); // note the order of adding. If the order is incorrect, ie Memory leakage <br/> form. appendchild (input); <br/> alert (form. elements. test) <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> view in IE6 and IE7, of course, IE8 is fine. I have put IE8 in IE7 compatibility mode. The compatibility mode is compatible with the bugs ...... </H3> <br/> </body> <br/> </ptml> <br/>
RunCode
There are two solutions. For example, if innerhtml is used, I think innerhtml is a great invention, and even Firefox and W3C have to give in.
<br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var body = document. body; <br/> var form = document. createelement ("form"); <br/> form. innerhtml = "<input name = 'test' type = 'text'/>" <br/> body. appendchild (form); <br/> alert (form. elements. test) <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> IE6 and IE7 </p> <br/> </body> <br/> </ptml> <br/>
Run code
Another feature that utilizes the powerful createelement feature of IE can be used to create elements while creating attributes.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var body = document. body; <br/> var form = document. createelement ("form"); <br/> try {<br/> var input = document. createelement ("<input type = 'text' name = 'test'>"); <br/>}catch (e) {<br/> var input = document. createelement ("input"); <br/> input. setattribute ("name", "test") <br/>}< br/> body. appendchild (form); // note the order of adding. If the order is incorrect, ie Memory leakage <br/> form. appendchild (input); <br/> alert (form. elements. test) <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> IE6 and IE7 </p> <br/> </body> <br/> </ptml> <br/>
Run code
But name is only the tip of the iceberg. When setting attributes, setattribute has many attributes in IE, which are different from those in standard browsers. Let's take a look at jquery and find that it is also incomplete. Many mines are buried here, and there will always be one you will sooner or later. The following is a detailed reference table: the standard browser on the left and IE on the right.
VaR iefix = {Signature: "acceptcharset", accesskey: "accesskey", allowtransparency: "allowtransparency", bgcolor: "bgcolor", cellpadding: "cellpadding", cellspacing: "cellspacing ", "Class": "classname", colspan: "colspan", checked: "defaultchecked", selected: "defaultselected", "for": "htmlfor", frameborder: "frameborder ", hspace: "hspace", longdesc: "longdesc", maxlength: "maxlength", marginwidth: "marginwidth", marginheight: "marginheight", noresize: "noresize", noshade: "noshade", readonly: "readonly", rowspan: "rowspan", tabindex: "tabindex", valign: "valign", vspace: "vspace "}
IE cannot use setattribute to set the onxxx attribute for DOM elements. In other words, it cannot use setattribute to set events.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var body = document. body; <br/> var form = document. createelement ("form"); <br/> form. innerhtml = "<input name = 'test' type = 'text '/> "<Br/> body. appendchild (form); <br/> form. elements. test. setattribute ("onfocus", "alert (this. name )"); <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> setattribute set events </p> <br/> <p> the expected alert is not displayed after the focus is obtained in the text field of IE! </P> <br/> </body> <br/> </ptml> <br/>
Run code
IE should be assigned to a function directly!
VaR body = document. body; var form = document. createelement ("form"); form. innerhtml = "<input name = 'test' type = 'text'/>" body. appendchild (form); If (! + "\ V1") {form. elements. test. setattribute ("onfocus", function () {alert (this. name)});} else {form. elements. test. setattribute ("onfocus", "alert (this. name )");}
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var body = document. body; <br/> var form = document. createelement ("form"); <br/> form. innerhtml = "<input name = 'test' type = 'text '/> "<Br/> body. appendchild (form); </P> <p> If (! + "\ V1") {<br/> form. elements. test. setattribute ("onfocus", function () {alert (this. name)}); <br/>}else {<br/> form. elements. test. setattribute ("onfocus", "alert (this. name )"); <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> if you use setattribute to set events for IE, you must assign functions directly! </H3> <br/> </body> <br/> </ptml> <br/>
Run code
In IE6 and IE7, you cannot set styles with setattribute:Dom. setattribute ("style", "font-size: 14px ")
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var styledata = 'border: 1px solid #000; Background: # f1fafa; font-weight: bold ;'; <br/> var h3 = document. getelementsbytagname ("H3 ") [0] </P> <p> h3.setattribute ('style', styledata ); <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> IE6 and IE7 is ineffective! </H3> <br/> </body> <br/> </ptml> <br/>
Run code
in this case, it is safer to assign values to the style.css text attribute of the domelement.
<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <title> setattribute bug by situ zhengmei </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 7 "> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var styledata = 'border: 1px solid #000; Background: # f1fafa; font-weight: bold ;'; <br/> var h3 = document. getelementsbytagname ("H3 ") [0] <br/> If (! + "\ V1") {<br/> // use. csstext hack <br/> h3.style. setattribute ('csstext ', styledata); <br/>}else {<br/> // use the correct DOM method <br/> h3.setattribute ('style', styledata ); <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> h3.style. setattribute ('csstext ', styledata); </p> <br/> </body> <br/> </ptml> <br/>
run the Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
