javascript : setAttribute : 요소의 속성값을 정하는 메서드

 

 기본형태
element.setAttribute(속성명, 속성값);

 

setAttribute() 메서드는 지정된 요소의 속성 값을 설정한다. 만약 이미 속성값을 가지고 있었다면 그 값을 지우고 새로운 값을 적용한다.

 

 

<예제>

 

[CSS]

.democlass {
	color: red;
    background-color : yellow;
}

 

[HTML]

<h1 id="set" > setAttribute 메서드 적용 <h1>
<button id="btn" onclick="click()"> 클레스 추가 </button>

 

[JS]

function click() {
	document.getElementById("set").setAttribute("href","https://naver.com");
    document.getElementById("set").style.color = "red";
}

 

 

🌈 결과

 

- ★  변경전

---

setAttribute 메서드 적용

클레스 추가

 

---

---

 

 

🍭 클레스 추가 버튼을 클릭하게 되면? Attribute 가 실행이 되면서 style.color 가 red 가 된다.

 

- ⭐️  변경후

 

---

setAttribute 메서드 적용

클레스 추가

 

---

 

 

 

 

========================================================================================