JavaScript에서 setAttribute를 사용하는 방법

JavaScript에서는 Element에 다양한 속성을 동적으로 추가해야 하는 경우가 많습니다. 이는 브라우저 호환성 문제와 관련된 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 코어를 사용하는 브라우저는 "className"을 인식하지 못하기 때문에 대신 "className"을 사용해야 합니다.

마찬가지로 Firefox도 "className"을 인식하지 못합니다. 따라서 일반적으로 사용되는 방법은 다음을 모두 사용하는 것입니다.

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

element.setAttribute("className", value) // Firefox IE의 경우

2. 메소드 속성 및 기타 문제

예:

var bar = document.getElementById("testbt");

bar.setAttribute("onclick", "javascript:alert('This is a test!');");

여기서 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("테스트입니다. !"); }