- 상태 변수
- data-
- className
- classList
1) 상태 변수
하나로 두 가지 결과를 얻을 때 사용한다.
true, 1 / open / 텍스트 변경 / 진행
false, 0 / close / 중지
<body>
<button>HELLO</button>
<script>
'use strict';
let btn = document.querySelector('button');
let isplay = true;
btn.addEventListener('click', ()=>{
if(isplay){
btn.textContent = 'BYE';
isplay=false;
} else {
btn.textContent = 'HELLO';
isplay=true;
}
});
</script>
</body>
처음 ispaly는 true이고 버튼을 클릭했을 때 isplay가 true이면 BYE를 출력함과 동시에 isplay를 false로 바꾼다.
그 뒤에 버튼을 클릭하게 되면 isplay는 false이므로 else의 실행문이 실행되어 HELLO와 BYE를 반복하며 출력하게 된다.
<body>
<button>HELLO</button>
<script>
'use strict';
let btn = document.querySelector('button');
let isplay = true;
btn.addEventListener('click', ()=>{
if(isplay){
btn.textContent = 'BYE';
} else {
btn.textContent = 'HELLO';
}
isplay = !isplay;
// !true => false
// !false => true
});
</script>
</body>
if의 true, false 실행문에 isplay를 넣지 않고 if문이 끝난 뒤 isplay를 반대값으로 바꾸어 주는 isplay=!isplay를 사용할 수도 있다.
이렇게 되면 클릭을 하면 isplay의 값이 현재의 반대로 바뀌게 된다.
2) data-
<body>
<div class="a1" data-name="유재석">1</div>
<div class="a2" data-name="정형돈" data-age="20">2</div>
<div class="a3" data-list-name="노홍철" data-list-age="30">3</div>
<div class="a4" data-test-num1="40" data-test-num2="50">4</div>
<script>
'use strict';
let dom1 = document.querySelector('.a1');
let dom2 = document.querySelector('.a2');
let dom3 = document.querySelector('.a3');
let dom4 = document.querySelector('.a4');
dom1.textContent=`${dom1.dataset.name}입니다.`;
dom2.textContent=`${dom2.dataset.name}은 ${dom2.dataset.age}살 입니다.`;
dom3.textContent=`${dom3.dataset.listName}은 ${dom3.dataset.listAge}살 입니다.`;
// 두 번째 첫 글자는 대문자
dom4.textContent=Number(dom4.dataset.testNum1)+Number(dom4.dataset.testNum2)
</script>
</body>
data-뒤의 텍스트는 name, list, age, test-num1등 과 같이 사용자가 정의할 수 있다.
하지만 data-list-name과 같은 경우에는 호출할 때 두 번째 첫 글자는 대문자로 써야 한다.
정의 : data-list-name
호출 : data.listName
<body>
<ul>
<li>
<img src="images/img0.jpg" data-title="고양이" data-msg="고양이 한마리" data-num="0" alt="">
</li>
<li>
<img src="images/img2.jpg" data-title="원숭이" data-msg="원숭이 다섯마리" data-num="1" alt="">
</li>
</ul>
<div class="box1">xxx</div>
<div class="box2">xxx</div>
<div class="box3">xxx</div>
<div class="box4">xxx</div>
<script>
'use strict';
let pic1 = document.querySelector('li:first-child img');
let pic2 = document.querySelector('li:last-child img');
let div1 = document.querySelector('.box1');
let div2 = document.querySelector('.box2');
let div3 = document.querySelector('.box3');
let div4 = document.querySelector('.box4');
let txt1, txt2, txt3, txt4;
pic1.addEventListener('click', (e)=>{
e.target.style.border='3px solid orange'
pic2.style.border='none'
txt1=e.target.getAttribute('src');
txt2=e.target.dataset.title;
txt3=e.target.dataset.msg;
txt4=e.target.dataset.num;
div1.textContent=txt1;
div2.textContent=txt2;
div3.textContent=txt3;
div4.textContent=txt4;
})
pic2.addEventListener('click', (e)=>{
e.target.style.border='3px solid orange'
pic1.style.border='none'
txt1=e.target.getAttribute('src');
txt2=e.target.dataset.title;
txt3=e.target.dataset.msg;
txt4=e.target.dataset.num;
div1.textContent=txt1;
div2.textContent=txt2;
div3.textContent=txt3;
div4.textContent=txt4;
})
</script>
</body>
이렇게 이미지 안에 data를 넣어서 불러올 수 있다.
3) className
특정 요소의 class 값을 가져오거나, 바꿀 수 있다.
<style>
body {
margin: 30px;
}
div {
width: 300px;
height: 100px;
border: 1px solid #000;
margin: 10px;
}
button {
width: 120px;
height: 50px;
margin: 5px;
}
.output {
width: 300px;
padding: 20px;
border: 1px solid #000;
}
.box {
background: tan;
font-size: 50px;
text-align: center;
}
.on {
border-width: 20px;
}
.on1 {
background: lightblue;
border-radius: 20px;
}
.on2 {
height: 200px;
border-color: lightcoral;
}
.on3 {
height: 100px;
background: lightgreen;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>className</h2>
<div class="box on">xxx</div>
<p class="output">
vvv
</p>
<p>
<button>읽기</button>
<button>추가1</button>
<button>추가2</button>
<button>추가3</button>
<button>추가4</button>
<button>추가5</button>
<button>삭제</button>
</p>
<script>
'use strict';
let dom = document.querySelector('div');
let output = document.querySelector('.output');
let btn = document.querySelectorAll('button');
let txt;
btn[0].addEventListener('click', (e)=>{
txt=dom.className;
output.textContent = txt;
})
btn[1].addEventListener('click', (e)=>{
dom.className='on1'
})
btn[2].addEventListener('click', (e)=>{
dom.className+=' on2'
// class 연결시 띄어쓰기
})
btn[3].addEventListener('click', (e)=>{
dom.className='on1 on2 on3'
})
btn[4].addEventListener('click', (e)=>{
dom.className+=' on1 on2 on3'
})
btn[5].addEventListener('click', (e)=>{
dom.className='box'
dom.className+=' on'
dom.className+=' on1'
dom.className+=' on2'
dom.className+=' on3'
})
btn[6].addEventListener('click', (e)=>{
dom.className='';
})
</script>
</body>
</html>
css에서 작성한 class를 html에서 적용시키지 않고 script에서 적용시키는 방법이다.
btn[0] : 현재 class를 모두 알려준다.
btn[1] : class를 on1로 변경한다.
btn[2] : class에 on2를 추가한다. (추가할 땐 맨 앞에 띄어쓰기를 해야 한다.)
btn[3] : class를 on1 on2 on3로 변경한다,
btn[4] : 기존 class에 class on1 on2 on3를 추가한다.
btn[5] : 모든 class를 삭제한다.
4) classList
<body>
<div>xxx</div>
<strong>xx</strong>
<p>
<button>add</button>
<button>remove</button>
<button>toggle</button>
<button>contains</button>
<button>replace</button>
</p>
<script>
'use strict';
let btn = document.querySelectorAll('button');
let dom = document.querySelector('div');
let strong = document.querySelector('strong');
let txt;
btn[0].addEventListener('click', e=>{
dom.classList.add('on1', 'on2');
strong.textContent=dom.classList;
});
btn[1].addEventListener('click', e=>{
dom.classList.remove('on2');
strong.textContent=dom.classList;
});
btn[2].addEventListener('click', e=>{
dom.classList.toggle('on1');
// 한번 클릭 시 add, 두번 클릭 시 remove
strong.textContent=dom.classList;
});
btn[3].addEventListener('click', e=>{
txt=dom.classList.contains('on1');
strong.textContent=txt;
});
btn[4].addEventListener('click', e=>{
dom.classList.replace('on1', 'on2');
// on1을 on2로 변경
strong.textContent=dom.classList;
});
</script>
</body>
add('클래스명') : 추가, 붙이기(추가하려는 class가 이미 존재한다면 무시한다.)
remove('클래스명') : 제거
toggle('클래스명') : 첫 번째는 해당 class가 추가되고 두 번째는 해당 class가 제거된다.
contains('클래스명') : class가 존재하는지 확인 (if문 사용)
replace(oldClass, newClass) : 새로운 클래스로 교체
