const tooktak = document.querySelector('#뚝딱');
const doeggabi = document.querySelector('#도깨비');
1
스타일 프로퍼티를 활용해서 요소의 스타일을 직접 수정하기
tooktak.children[0].style.textDecoration = 'line-through'; // 글씨 중간에 줄 긋
tooktak.children[0].style.backgroundColor = '#000000'; // 배경색 검정색
- 스타일 프로퍼티는 카멜표기법을 사용해서 입력해야 한다.
.text-decoration (x) / .textDecoration (o) - 프로퍼티만 카멜표기법이고, 프로퍼티의 할당값은 css에서 사용하는 그대로 사용한다.
line-through (o) / lineThrough (x) - 태그에 직접 스타일을 부여하기 때문에 스타일 우선순위에 문제가 생기고, 가독성에 좋지 않다.
2
태그에 클래스 추가하는 법
element.className
tooktak.children[1].className = 'goTooktak' // tooktak의 첫번째 요소에 goTooktak이라는 클래스명 주기.
- 위 방법보다 조금 더 권장하는 방식
3
원래 있던 클래스를 두고 새로운 클래스를 추가하는 법
.element.classList : add, remove, toggle 메소드 사용
- 클래스의 속성값을 유사배열로 다룬다.
- 클래스의 속성을 하나씩 다룰 수 있다.
3-1
add 클래스 추가
const item = doeggabi.children[1];
item.classList.add('goTooktak');
- 여러 클래스를 넣고 싶을 때는 여러개의 파라미터로 전달하기.
- 만약 같은 이름의 클래스를 중복해서 추가하더라도 하나만 추가 된다.
item.classList.add('goTooktak', 'doTooktak');
3-2
remove 클래스 제거
item.classList.remove('goTooktak');
- 여러 클래스를 넣는 방법은 위의 add와 같다.
3-3
toggle 이미 클래스 명이 있으면 클래스 제거, 없으면 추가
item.classList.toggle('goTooktak');
item.classList.toggle('goTooktak', true); // 추가
item.classList.toggle('goTooktak', false); // 삭제
- add나 remove처럼 여러개의 파라미터를 전달한다고 해서 여러개의 클래스를 토글하진 않는다.
- 두번째 파라미터는 불린 형태를 전달 받아서 추가 혹은 삭제를 지정하는 기능을 가진다.
- 자주 사용 되는 기능은 아니다.
- toggle 메소드는 클래스 하나만을 다룬다는 것을 기억하자.
728x90