[ javascript ] 15. className , classList, getComputedStyle

javascript+es6

[ javascript ] 15. className , classList, getComputedStyle

변쌤(이젠강남) 2023. 9. 27. 17:38

클래스 조작

1. className

2. classList

3. getComputedStyle

4. setProperty

명령어	설명	mdn
Element.className	특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정	바로가기
Element.classList	클래스 추가 삭제 등	바로가기
getComputedStyle	CSS 속성값 가져오기	바로가기
setProperty	CSS 속성에 대한 새 값을 설정	바로가기

# className

속성의 값을 가져오거나 설정

형식

element.className
element.className += newClassName;
element.className = "class1 class2";

예)

<ul id="menu" class="vertical main">
   <li>Homepage</li>
   <li>Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>

let menu = document.querySelector('#menu');
console.log(menu.className)

결과:
vertical main

let menu = document.querySelector('#menu');
menu.className += ' new';
console.log(menu.className);

결과 :
'vertical main new'

<div id="note" class="info yellow-bg red-text">JS className</div>

let note = document.querySelector('#note');
console.log(note.className); 

결과:
info yellow-bg red-text

# classList

요소의 classList속성은 요소의 CSS 클래스 라이브 컬렉션을 반환합니다.

Element.classList 는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList (en-US)를 반환하는 읽기 전용 프로퍼티입니다.

메서드	설명
add( String [, String [, ...]] )	지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
remove( String [, String [, ...]] )	지정한 클래스 값을 제거한다., 단 존재하지 않는 클래스를 제거하는 것은 에러를 발생시키지 않습니다.
toggle( String [, force] )	하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다. 두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.
contains( String )	지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
replace( oldClass, newClass )	존재하는 클래스를 새로운 클래스로 교체한다.

const classes = element.classList;

예)

<div id="content" class="main red">JavaScript classList</div>

let div = document.querySelector('#content');
let item = div.classList
for (let cssClass of item) {
    console.log(cssClass);
}
 
결과:
main
red

# 클래스 추가 : add()

요소의 클래스 목록에 CSS 클래스를 추가할 수 있습니다.

선택자. classList.add('클래스명')

let div = document.querySelector('#content');
div.classList.add('info');

선택자. classList.add('클래스명', '클래스명' , '클래스명'..)

let div = document.querySelector('#content');
div.classList.add('info','visible','block');

# 클래스 삭제 : remove()

remove()하면 요소의 클래스 목록에 CSS 클래스를 제거할 수 있습니다.

선택자. classList.remove('클래스명')

선택자. classList.remove('클래스명', '클래스명' , '클래스명'..)

let div = document.querySelector('#content');
div.classList.remove('visible');
div.classList.remove('block','red');

# 클래스 교체 : replace()

기존 클래스를 새 클래스로 바꿀 때 사용합니다

선택자. classList.replace('현재 클래스', '새로운 클래스' )

선택자. classList.replace('A클래스', 'B클래스' ) : A클래스를 B클래스로 교체

let div = document.querySelector('#content');
div.classList.replace('info','warning');

# 클래스 존재여부 : contains()

contains() 요소의 클래스 목록에 지정된 클래스가 포함여부를 체크할 때사용합니다.

선택자. classList.contains('클래스명') : true , false

let div = document.querySelector('#content');
div.classList.contains('warning'); // true

# 클래스 토글 : toggle()

toggle() 클래스를 전환할 때 사용합니다.

선택자. classList.toggle('클래스명')

let div = document.querySelector('#content');
div.classList.toggle('visible');

# getComputedStyle

let style = window.getComputedStyle(element [,pseudoElement]);

element 스타일을 반환하려는 요소입니다.

다른 노드 유형 (예: 텍스트 노드)을 전달하면 메서드에서 오류가 발생합니다.

pseudoElement일치시킬 요소를 지정합니다. 기본값은 null.

window는 생략 가능합니다.

let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);

예)

 <style>
        .box {
            background-color: #fff3d4;
            border: solid 1px #f6b73c;
            padding: 20px;
            color: black;
        }
</style>

<p class="box" >
         getComputedStyle 테스트 입니다.  
</p>

let box = document.querySelector('.box');
let style = getComputedStyle(box);

console.log('color:', style.color);
console.log('background color:', style.backgroundColor);

결과

color: rgb(255, 0, 0)
background color: rgb(255, 243, 212)

예)

<html>
<head>
    <title>getComputedStyle</title>
    <style>       
        p::first-letter {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id="box">안녕하세요 지금은 연습중</p>
    <script>
        let p = document.getElementById('box');
        let style = getComputedStyle(p, '::first-letter');
        console.log(style.fontSize);
    </script>
</body>
</html>

# setProperty

html

<div id="box"></div>

css

#box::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-image: url('이미지.jpg');  
}

css 수정

#box::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-image: var(--after-background-image, url('이미지.jpg'));  
}

javascript

JavaScript를 사용하여 배경 이미지 변경

box.style.setProperty('--after-background-image', 'url("새로운이미지.jpg")');

JavaScript를 사용하여 --after-background-image라는 사용자 지정 CSS 변수를 설정하고, 그 값을 통해 ::after 가상 요소의 배경 이미지를 변경합니다. 이렇게 하면 JavaScript를 사용하여 CSS를 동적으로 조작할 수 있습니다.

'javascript+es6' 카테고리의 다른 글

[ javascript ] 17. window,스크롤, 마우스 좌표, getBoundingClientRect, document (0)	2023.10.16
[ javascript ] 16. createElement , append, prepend , video, table (0)	2023.10.15
[ javascript ] 14. this, target과 currentTarget, dataset, animate (0)	2023.09.27
[ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault (0)	2023.09.27
[ javascript ] 12. 이벤트 종류와 작성법 (0)	2023.09.24

현재글[ javascript ] 15. className , classList, getComputedStyle

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study