JavaScript_Basic 지식에서 setAttribute 사용법 소개

setAttribute(문자열 이름, 문자열 값): 지정된 이름과 값을 가진 새 속성을 추가하거나 기존 속성을 지정된 값으로 설정합니다.
1. 스타일 문제
setAttribute("class", value)의 클래스는 "class" 속성을 변경하는 것을 의미하므로 인용이 필요합니다.
vName은 스타일에 값을 할당하는 것을 나타냅니다.
예:

코드 복사 코드는 다음과 같습니다.

var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class ",bordercss) ;

출력 시: 즉, 입력 컨트롤에 bordercss 스타일 속성이 있습니다
참고: 클래스 속성은 W3C에서 DOM이 매우 중요한 역할을 하지만 브라우저 차이로 인해 여전히 존재합니다.
setAttribute("class", vName) 문을 사용하여 Element의 클래스 속성을 동적으로 설정하는 것은 Firefox에서는 작동하지만 IE에서는 작동하지 않습니다. IE 코어를 사용하는 브라우저는 "class"를 인식하지 못하기 때문에 대신 "className"을 사용해야 합니다.
마찬가지로 Firefox도 "className"을 인식하지 못합니다. 따라서 일반적인 방법은 두 가지를 모두 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

element.setAttribute ("class", value); //firefox
element.setAttribute("className", value); //IE

2, 메소드 속성 및 기타 문제
예:

코드 복사 코드는 다음과 같습니다.

var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('이것은 테스트입니다!');");

여기에서는 setAttribute를 사용합니다. e의 onclick 속성을 지정하는 것은 간단하고 이해하기 쉽습니다.
그러나 IE가 이를 지원하지 않는다는 것은 IE가 setAttribute 함수를 지원하지 않는다는 것이 아니라, 객체 속성, 컬렉션 속성, 이벤트 속성 등 특정 속성을 설정하기 위해 setAttribute를 사용하는 것을 지원하지 않는다는 것입니다. setAttribute를 사용하여 스타일과 onclick 속성을 설정하는 것은 IE에서는 작동하지 않습니다.
다양한 브라우저와의 호환성을 확보하기 위해 점 표기법을 사용하여 Element의 객체 속성, 컬렉션 속성, 이벤트 속성을 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

document.getElementById("testbt"). className = " bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f" ;
document.getElementById("testbt").onclick= function () { Alert("테스트입니다!") }