js로 css를 조작해서 색깔을 바꾸는 두가지 방법
- 요소.style.color = "#123123" 와 같이 직접 변경한다.
- 왠만하면 js가 css를 직접 바꾸는 것은 피하는게 좋다.
- 해당 요소에 css 요소를 class 등을 통해 추가/제거한다.
나는 색깔을 번갈아 바꾸기 위해서는 class를 추가/제거하는 방식을 사용했고,
색깔을 랜덤으로 바꾸기 위해서는 직접 조작해서 변경하는 방식을 사용했다.
const toggle = document.querySelector("#toggle");
const random = document.querySelector("#random");
function changeColor (){
toggle.classList.toggle("toggle-color")
}
function changeRandomColor() {
this.style.color="#"+[...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
}
toggle.addEventListener("click",changeColor);
random.addEventListener("click",changeRandomColor);classList.toggle("abc")
해당 DOM 요소가 가지고 있는 className의 목록에 "abc" className이 존재하면 "abc"를 remove하고, 존재하지 않으면 add 한다.
