JAVASCRIPT .setAttribute

Javascript의 .setAttribute 메소드는 HTML요소의 속성(attribute)값을 설정하는데 사용된다. 이 메소드를 사용하여 속성을 동적으로 추가하거나 변경 할 수 있다.

아래 예제에서는 <button>요소를 만들고 해당 요소의 class속성을 설정하는 예제를 만들어보겠다.

<button id = "myButton">Click me!</button>

button을 만들어 주는데 Click me!라는 button이고 id 는 "myButton"을 가지고 있는 button이다.

여기에 Javascript에서 .setAttribute를 사용하여 위에 버튼에 class 속성을 설정하려고 하면 다음과 같이 작성할 수 있다.

 

const button = document.getElmentById("myButton");
button.setAttribute("class", "my-class");

위 코드에서 .getElementById 메소드를 사용하여 button요소를 가져오고 그 다음 로직에 .setAttribute를 사용하여 class속성을 my-class로 추가해주었다.

 

이렇게 button의 class속성이 추가 되었는데 아래에 또 다른 예시는 이미 있는 속성의 값을 변경하는 예시이다.

button의 class속성을 "my-class"에서 "new-class"로 변경해보겠다.

button.setAttribute("class", "new-class");

 

이 밖에 .setAttribute 메소드를 사용해 다른 속성도 설정할 수 있다. 예로 button요소의 "data"속성을 설정하려면

button.setAttribute("data", "my-data-value");

이렇게 하면된다.

위 코드는 button 요소에 data속성이 추가 되었으며, 그 값은 "my-data-value"이다.

 

정리하자면 .setAttribute 메소드를 사용하여 Javascript에서 HTML요소의 속성을 설정하고 변경할 수 있다.