IE 브라우저에 존재하는 setattribute bug
IE의 setattribute는 표준 브라우저와 많이 다르다. 주로 IE가 setattribute의 기능에 대해 제한이 있다. 바로 setattribute로class, onclick 등 이벤트의 값을 설정할 수 없고name 속성을 설정하면 setattribute가 IE 브라우저에서 많은 용도를 잃게 된다.IE6, IE7에서는 input 요소를 동적으로 생성하면name 속성을 설정할 수 없습니다.그러나 물론 이 버그는 최신판 IE8에서 복구됐으며, 자세한 내용은 마이크로소프트 홈페이지에서 제시한 자료를 참조하면 된다.name 속성은 테이블 요소에 매우 중요하기 때문에 (폼을 제출할 때value 속성과 키 값을 구성하여 백엔드로 보내기) 이 버그를 유의해야 합니다.
Microsoft 관련 자료: NAME Attribute | name Property
IE6과 IE7에서 찾아보세요. 물론 IE8도 괜찮아요. IE8을 IE7의 호환 모드에서 작동시켰어요.호환 모드 버그까지 호환...
해결 방법은 두 가지가 있다. 예를 들어 inner HTML로 inner HTML은 정말 위대한 발명이라고 생각하고 화호와 W3C 녀석들도 굴복하지 않을 수 없다.
IE6과 IE7에서
또 하나는 IE의 강력한createElement 특징을 이용하여 원소를 만드는 동시에 속성도 함께 만들 수 있다.
IE6과 IE7에서
그러나name는 빙산의 일각일 뿐입니다. setattribute는 속성을 설정할 때 IE에서 표준 브라우저의 이름과 다른 속성이 많습니다. jQuery를 보면 그것도 완전하지 않습니다.많은 지뢰가 여기에 묻혀 있는데, 언젠가는 네가 걸릴 것이다.다음은 상세한 참조표입니다. 왼쪽은 표준 유람기이고 오른쪽은 IE입니다.
var IEfix = { acceptcharset: "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 setAttribute dom onXXX ， ， setAttribute 。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By </title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var body = document.body;
var form = document.createElement("form");
form.innerHTML = "<input name='test' type='text' />"
body.appendChild(form);
form.elements.test.setAttribute("onfocus", "alert(this.name)");
}
</script> </head>
<body>
<h3> setAttribute </h3>
<p> IE alert!</p>
</body>
</html>
IE ！ 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)" ); }
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By </title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
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)");
}
}
</script> </head>
<body>
<h3>IE setAttribute ！</h3>
</body>
</html>
IE6 IE7 setAttribute :dom.setAttribute("style","font-size:14px")
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By </title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';
var h3 = document.getElementsByTagName("h3")[0]
h3.setAttribute('style', styleData);
}
</script> </head>
<body>
<h3>IE6 IE7 ！</h3>
</body>
</html>
dom style.csstext 。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>setAttribute bug By </title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<script type="text/javascript">
window.onload = function(){
var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';
var h3 = document.getElementsByTagName("h3")[0]
if(!+"\v1"){
//use the .cssText hack
h3.style.setAttribute('cssText', styleData);
} else {
//use the correct DOM Method
h3.setAttribute('style', styleData);
}
}
</script> </head>
<body>
<h3>h3.style.setAttribute('cssText', styleData);</h3>
</body>
</html>
： ， ， ， 。 ， IE ， w3c ！ IE 。 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콜백 함수를 Angular 하위 구성 요소에 전달이 예제는 구성 요소에 함수를 전달하는 것과 관련하여 최근에 직면한 문제를 다룰 것입니다. 국가 목록을 제공하는 콤보 상자 또는 테이블 구성 요소. 지금까지 모든 것이 구성 요소 자체에 캡슐화되었으며 백엔드에 대한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
