className
<!-- https://www.youtube.com/watch?time_continue=766&v=S4BN1tZmmWw -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h2[id *= "title"] {
border: dotted 1px;
}
.clicked {
background-color: #74b9ff;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Click Box</h2>
<h2 id="title" class="test">className</h2>
<h2 id="title_second" class="test">classList add remove</h2>
<h2 id="title_third" class="test">class toggle</h2>
<script>
const classNameVar = document.querySelector('#title');
const classListVar = document.querySelector('#title_second');
const toggleVar = document.querySelector('#title_third');
const CLASS_STYLE = 'clicked';
// className
classNameVar.addEventListener('click', function() {
if(classNameVar.className !== CLASS_STYLE) {
return classNameVar.className = CLASS_STYLE;
}
if(classNameVar.className === CLASS_STYLE) {
return classNameVar.className = '';
}
});
// classList add remove
classListVar.addEventListener('click', function() {
const hascClassClicked = classListVar.classList.contains(CLASS_STYLE);
if(!hascClassClicked) {
return classListVar.classList.add(CLASS_STYLE);
}
if(hascClassClicked) {
return classListVar.classList.remove(CLASS_STYLE);
}
});
// classList toggle
toggleVar.addEventListener('click', function() {
toggleVar.classList.toggle(CLASS_STYLE);
});
</script>
</body>
</html>'programming > javascript' 카테고리의 다른 글
| Arrow Function, function() 의 this 차이 예제 코드 (0) | 2019.11.16 |
|---|---|
| [JS] forEach, map, filter (0) | 2019.11.16 |
| prettier html 적용 끄기(mac vscode) (0) | 2019.09.05 |
| closure, callback 예시 만들기 (0) | 2019.08.29 |
| 생활코딩 자바스크립트 class 강의를 보고 만든 예제 (0) | 2019.08.24 |
