HTML DOM Element setAttribute() 메서드

정의와 사용법

setAttribute() 지정된 속성을 추가하고, 해당 값을 설정합니다.

지정된 속성이 이미 존재하면, 값만 설정/변경됩니다.

注意：HTML 문서의 HTMLElement 객체는 모든 표준 HTML 속성에 대한 JavaScript 속성을 정의합니다. 따라서 비표준 속성을 설정해야 할 때만 이 메서드를 사용해야 합니다.

另请参阅：

参考手册：

getAttribute() 메서드

removeAttribute() 메서드

hasAttribute() 메서드

hasAttributes() 메서드

getAttributeNode() 메서드

setAttributeNode() 메서드

removeAttributeNode() 메서드

教程：

HTML 속성

예제

예제 1

요소에 class 속성 추가:

element.setAttribute("class", "democlass");

추가 전:

Element 객체

추가된 후:

Element 객체

직접 테스트해 보세요

예제 2

입력 필드를 버튼으로 변경하십시오:

myInput.setAttribute("type", "button");

직접 테스트해 보세요

변경 전:

변경된 후:

예제 3

<a> 요소에 href 속성을 추가하십시오:

myAnchor.setAttribute("href", "");

직접 테스트해 보세요

추가 전:

codew3c.com에 방문하십시오

추가된 후:

codew3c.com에 방문하십시오

예제 4

target 속성의 값을 "_self"로 변경하십시오:

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

직접 테스트해 보세요

문법

element.setAttribute(이름, value)

파라미터

파라미터 설명
이름 필수. 속성 이름.
value 필수. 새로운 속성 값.

반환 값

없음

throw

예외 설명
INVALID_CHARACTER_ERR 파라미터 이름 HTML 속성 이름이나 XML 속성 이름에 사용할 수 없는 문자가 포함되어 있습니다.
NO_MODIFICATION_ALLOWED_ERR 현재 요소는 읽기 전용이며, 속성을 수정할 수 없습니다.

주의

요소에 값이 있는 스타일 속성을 추가할 수 있지만, 이를 권장하지 않습니다. 이는 스타일 속성의 다른 속성을 덮어쓸 수 있습니다.

스타일 객체의 속성을 사용하여 변경하세요:

단점:

element.setAttribute("style", "background-color:red;");

장점:

element.style.backgroundColor = "red";

브라우저 지원

element.setAttribute() DOM Level 1 (1998) 특성입니다.

모든 브라우저는 완전히 지원합니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원