기본 형태
element.setAttribute(속성명,속성값);
setAttribute() 메서드는 지정된 요소의 속성 값을 설정한다. 만약 이미 속성값을 가지고 있었다면 그 값을 지우고 새로운 값을 적용한다.
<예제>
[CSS]
.democlass {
color: red;
background-color: yellow;
}
[HTML]
<h1>setAttribute 메서드 적용해보기</h1>
<button id="button" onclick="myFunction()">Add Class</button>
[JS]
function myFunction() {
document.getElementById("myH1").setAttribute("class", "democlass");
}
<버튼 클릭 전>
<버튼 클릭 후 결과>
하트 버튼을 눌렀을 때 하트가 빨간색으로 색칠된 이미지가 등장하고, 다시 눌렀을 때 빈 하트가 나오도록 구현해보았다.
먼저, 두 하트 이미지를 준비하여 img 파일에 넣어준다.
//댓글 좋아요 기능 구현
const likeComment = newComment.querySelector("#empty_heart");
likeComment.addEventListener("click", function () {
let currentImg = likeComment.getAttribute("src");
if (currentImg.includes("empty")) {
likeComment.setAttribute("src", "img/red_heart.png");
} else {
likeComment.setAttribute("src", "img/empty_heart.png");
}
});
}
// 위 코드 전후로 적힌 setAttribute와 관계없는 코드들은 생략됨.
<버튼 클릭 전>
<버튼 클릭 후 결과>