const a = document.querySelector('#abc');
a.style.backgroundColor = '#000000';
a.style.속성명 = '속성값';- 카멜 표기법을 이용하여 속성을 나타내고, 속성 값의 경우 ' ' 혹은 " " 로 감싸서 작성한다.
- style 프로퍼티를 이용하면 태그에 직접적으로 값이 적용된다.
- setAttribute와 비슷한 효과.
- 스타일 우선순위가 바뀐다거나, 같은 스타일을 여러가지 태그에 적용해야 할 때는 불필요한 코드가 많아짐.
- 태그의 class를 변경하는 방식이 좀 더 권장 됨.
className
- 특정 태그에 스타일을 줄 때 class의 name을 전부 바꿔버림
<!-- 예를들어 -->
<div class = "a" >
<div class = "b"></div>
</div>- b 라는 클래스를 가진 div가 존재할 때 다음과 같은 스크립트를 작성하면
const a = document.querySelector('.a');
a.children[0].className = 'c';- HTML 실행 시 class 'a'가'c'로 변경된다.
<div class = "a" >
<div class = "c"></div>
</div>- 그런데, 기존의 class 를 놔두고 새로운 class를 추가하고 싶다면 어떻게 해야할까?
- 바로 classList 를 이용하는 것이다.
classList
- 클래스를 다루는 프로퍼티
- add : 클래스를 추가
- remove : 클래스를 삭제
- toggle : 클래스가 있으면 삭제하고, 없으면 추가
a.children[0].classList.add('c'); /* 결과 : class = 'a c' */
a.children[0].classList.remove('c'); /* 결과 : class = 'a' */
/* 여러 개의 class 추가 삭제 시 */
a.children[0].classList.add('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a c d e' */
a.children[0].classList.remove('c','d','e'); /* 컴마를 통해 추가 */ /* 결과 : class = 'a' */
a.children[0].classList.toggle('c'); /* c 라는 클래스가 있으면 삭제, 없으면 추가 */
a.children[0].classList.toggle('c',true); /* 두 번째에 Boolean 값을 받아 true 이면 add */
a.children[0].classList.toggle('c',false); /* 두 번째에 Boolean 값을 받아 false 이면 remove */'Js' 카테고리의 다른 글
| getAttribute,setAttribute,removeAttribute (0) | 2023.03.22 |
|---|---|
| 네이버 스마트에디터 2.0 집어넣기 (0) | 2023.03.03 |
| getElementsByClassName,querySelector(3/2 공부) (0) | 2023.03.02 |
| forEach문 - check박스를 이용한 비밀번호 표시(비밀번호 보기) (0) | 2023.02.16 |
| 회원가입 유효성 검사 (0) | 2023.02.15 |
