Contents
접기
classList
자바스크립트 classList 객체 연습
html 본문에서 사용한 id 위치
<style>
.info{ font-size: 1.5em;}
.red{ color: darkred;}
.blue{ color: darkblue;}
.green{ color: darkgreen;}
.visable{visibility: hidden;}
</style>
<div id="content" class="red">
자바스크립트 classList 객체 연습
</div>
<p id="target"></p>let target = document.getElementById('target');
let content = document.getElementById('content');
- output() : 문서에 작성하는 함수
function output(data){
target.innerHTML = data;
}
1) 클래스명 가져오기
document.getElementById('get').addEventListener('click', function(){
// alert()
let data = '';
data = content.classList; // classList의 value값을 가져옴
output(data);
console.log(data);
});
2) 클래스 추가
버튼을 누르면 클래스에 'info', 'blue' 라는 단어가 추가 되며 html에 적용된다.
document.getElementById('add').addEventListener('click', function(){
content.classList.add('info', 'blue');
});
3) 클래스 삭제
document.getElementById('remove').addEventListener('click', function(){
content.classList.remove('info','blue');
});
4) 클래스 교체
document.getElementById('replace').addEventListener('click', function(){
content.classList.replace('red','green');
});
5) 클래스 존재여부 확인(boolean값 반환)
클래스안에 black 이라는 단어가 포함되어있는지 체크 했으면 false를 반환
document.getElementById('contains').addEventListener('click', function(){
let result = content.classList.contains('black');
output(result);
});
6) 클래스 토글
// toggle()을 이용하여 class 토글
document.getElementById('toggle').addEventListener('click', function(){
content.classList.toggle('visability');
});
- toggle (w3schools 예제 : jquery)
- visibility (w3schools 예제)
class가 a인 태그의 문장만 나오는 것을 확인 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
</style>
</head>
<body>
예제 : classList를 이용한 모드 전환
다크 모드 버튼을 토글로
// 버튼을 얻어옴
let mode = document.getElementById('mode');
// 버튼에 이벤트 걸기
mode.addEventListener('click', modeExchange);
function modeExchange(){
let target = document.getElementsByTagName('body')[0];
target.classList.toggle('dark');
this.classList.toggle('btn');
}
적용시킨 css
<style>
/*클래스 대상*/
.dark{
background-color: dimgray;
color: white;
}
input[type='button']{
font-size: large;
border-radius: 10px;
background-color: white;
}
.btn{
color: white;
background-color : dimgray;
}
</style>
하나 고민이 있다면, 왜 버튼에 background-color 만 적용되지 않는 것일까...
input[type = 'button'] 을 변경하면 버튼에 적용되어야할 css가 안먹혀서 해결 방법을 모르겠다..
input[type = 'button'] 에서 적용한 css를 빼면 전환이 되는 것을 확인했다.
<style>
#mode{
font-size: large;
border-radius: 10px;
box-shadow: 1px 1px 1px;
}
.btn{
color: white;
background-color : dimgray;
}
</style>
'국비 교육 > 프론트엔드' 카테고리의 다른 글
| [자바스크립트] (예제) 종합 평가 점수 계산하기 (0) | 2024.03.09 |
|---|---|
| [자바스크립트] Node , 고객관리 프로그램 예제 (0) | 2024.03.09 |
| [자바스크립트] 회원가입 검증 예제 (0) | 2024.03.09 |
| [자바스크립트] 함수 - 4 (수학관련 함수) (0) | 2024.03.09 |
