집 >웹 프론트엔드 >JS 튜토리얼 >javascript에서 setAttribute() 함수를 사용하는 방법과 Compatibility_javascript 기술

javascript에서 setAttribute() 함수를 사용하는 방법과 Compatibility_javascript 기술

WBOY원래의: 2016-05-16 15:49:371604검색

setAttribute() 함수는 객체의 속성을 설정할 수 있습니다. 이 속성이 존재하지 않으면 생성됩니다.

문법 구조:

el.setAttribute(이름,값)

매개변수 목록:

매개변수 설명
이름은 필수입니다. 설정할 속성 이름을 지정합니다.
값이 필요합니다. 설정할 속성 값을 지정합니다.

코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"> 
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("id","newid"); 
 alert(mydiv.getAttribute("id")); 
} 
</script> 
</head> 
<body> 
<div id="mydiv"></div> 
</body> 
</html>

위 코드는 div의 id 속성 값을 재설정하고 새로 설정된 id 속성 값을 팝업할 수 있습니다.
예시 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("newAttr","attrValue"); 
 alert(mydiv.getAttribute("newAttr")); 
} 
</script> 
</head> 
<body> 
 <div id="mydiv"></div> 
</body> 
</html>

위 코드는 div의 newAttr 속성 값을 설정하고 이 속성 값을 팝업할 수 있습니다. 여기서 특별한 주의가 필요한 점은 div에는 기본적으로 newAttr 속성이 없기 때문에 setAttribute() 함수가 먼저 이 속성을 생성한 다음 값을 할당한다는 것입니다.

위의 두 코드 예제는 모든 주류 브라우저에서 성공적으로 실행될 수 있지만 이것이 setAttribute() 함수가 각 브라우저와 호환된다는 의미는 아닙니다.

다른 코드 예제 보기:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css"> 
.textcolor{ 
 font-size:18px; 
 color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 mydiv.setAttribute("class","textcolor"); 
} 
</script> 
</head> 
<body> 
 <div id="mydiv"></div> 
</body> 
</html>

위 코드는 표준 브라우저에서 글꼴 크기를 18px, 글꼴 색상을 빨간색으로 설정할 수 있지만 IE6 및 IE7 브라우저에서는 적용되지 않습니다.

그러나 mydiv.getAttribute("class")를 사용하여 속성 값 "textcolor"를 가져올 수 있습니다.

즉, IE6이나 IE7 브라우저에서는 setAttribute() 함수를 사용할 수 있지만 모든 속성에 적용되는 것은 아닙니다.

다음 속성에는 위와 같은 문제가 있습니다.

1.수업

2.for

3.셀 간격

4.셀패딩

5.tabindex

6.읽기 전용

7.최대 길이

8.rowspan

9.colspan

10.usemap

11.프레임경계

12.내용편집 가능

13.스타일

위 문제를 해결하려면 요소 속성을 설정하기 위한 범용 브라우저 간 인터페이스 방법을 작성해야 합니다.

dom=(function(){
var fixAttr={
 tabindex:'tabIndex',
 readonly:'readOnly',
 'for':'htmlFor',
 'class':'className',
  maxlength:'maxLength',
  cellspacing:'cellSpacing',
  cellpadding:'cellPadding',
  rowspan:'rowSpan',
  colspan:'colSpan',
  usemap:'useMap',
  frameborder:'frameBorder',
  contenteditable:'contentEditable'
 },
    
 div=document.createElement('div');
 div.setAttribute('class','t');
    
 var supportSetAttr = div.className === 't';
    
 return {
  setAttr:function(el, name, val){
  el.setAttribute(supportSetAttr &#63; name : (fixAttr[name] || name), val);
  },
  getAttr:function(el, name){
  return el.getAttribute(supportSetAttr &#63; name : (fixAttr[name] || name));
 }
}
})();

우선, 표준 브라우저는 원래 속성 이름을 직접 사용합니다. 둘째, 위에 나열되지 않은 IE6/7 속성은 여전히 원래 속성 이름을 사용합니다. 마지막으로 이러한 특수 속성은 class와 같은 fixAttr을 사용합니다.

그러면 위의 코드 예제를 다음과 같은 형식으로 수정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"> 
<style type="text/css"> 
.textcolor{ 
 font-size:18px; 
 color:red; 
} 
</style> 
<script type="text/javascript"> 
dom=(function(){ 
var fixAttr={ 
 tabindex:'tabIndex', 
 readonly:'readOnly', 
 'for':'htmlFor', 
 'class':'className', 
  maxlength:'maxLength', 
  cellspacing:'cellSpacing', 
  cellpadding:'cellPadding', 
  rowspan:'rowSpan', 
  colspan:'colSpan', 
  usemap:'useMap', 
  frameborder:'frameBorder', 
  contenteditable:'contentEditable' 
 }, 
     
 div=document.createElement('div'); 
 div.setAttribute('class','t'); 
     
 var supportSetAttr = div.className === 't'; 
     
 return { 
  setAttr:function(el, name, val){ 
  el.setAttribute(supportSetAttr &#63; name : (fixAttr[name] || name), val); 
  }, 
  getAttr:function(el, name){ 
  return el.getAttribute(supportSetAttr &#63; name : (fixAttr[name] || name)); 
 } 
} 
})(); 
window.onload=function(){ 
 var mydiv=document.getElementById("mydiv"); 
 dom.setAttr(mydiv, 'class', 'textcolor'); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

위 코드는 모든 주요 브라우저에서 유효하며, 글꼴 크기를 18px로, 색상을 빨간색으로 설정할 수 있습니다.
스타일 속성은 호환성을 위해 el.style.color="xxx"를 사용할 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：Javascript는 백스페이스 이벤트를 보호하는 웹페이지를 구현하고 입력 상자는 보호되지 않습니다_기본 지식다음 기사：Javascript는 백스페이스 이벤트를 보호하는 웹페이지를 구현하고 입력 상자는 보호되지 않습니다_기본 지식

javascript에서 setAttribute() 함수를 사용하는 방법과 Compatibility_javascript 기술

관련 기사