728x90
핵심
1. 클래스명 추가
html요소.classList.add('추가할 클래스명');
2. 클래스명 삭제
html요소.classList.remove('제거할 클래스명');
3. 클래스명 변경
html요소.className = [변경할 클래스명]; // 기존 클래스명은 사라지니 주의!
4. 클래스명 확인
html요소.classList.contains([존재하는지 확인 할 클래스명]); // 반환값은 boolen
연습
보통 클래스명을 통해 css로 스타일을 주는 일이 많은데..
버튼을 클릭했을 때 색상을 바꾸거나 폰트 굵기를 두껍게 하거나 하는 경우가 대표적이다.
제이쿼리의 .css함수나 event.target으로 스타일을 줘도 상관은 없지만 ( 링크 참조 )
보통 스타일은 css파일에 정의해놓고 각 id나 클래스명으로 스타일을 주는 게 더 바람직하기 때문에
오늘은 javascript를 통해 특정 이벤트가 발생했을 때 클래스명을 추가하여 스타일을 변경하는 것을 정리해보겠다.
샘플html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./testCSS.css"></script>
</head>
<script>
var addClassNm = () => {
//여기에 css를 주는 코드 작성
}
</script>
<body>
<h1 id="testClass" class="imClassNm" onclick="addClassNm()">클릭해보세요</h1>
</body>
</html>
샘플css
@charset "UTF-8";
.imClassNm {background-color: gray;}
.changedClassNm {background-color: green; font-weight: bold;}
우리의 목표는 "클릭해보세요"를 클릭하면 해당 <h1>의 class에
changedClassNm라는 클래스명을 추가하고 스타일이 변경되는 지 확인 하는 것이다. 그럼 바로 따라 해보자.
1. 클래스명 추가
<script>
var addClassNm = () => {
var element = document.getElementById('testClass');
element.classList.add('changedClassNm');
//또는 아래를 써도 됨
//document.getElementById('testClass').classList.add('changedClassNm');
}
</script>
이렇게 하면 "클릭하세요"를 클릭했을 때, 클래스명(changedClassNm)이 추가되며 스타일이 변경되는 것을
확인 할 수 있다.
제거/변경/확인도 위의 문법을 사용하면 쉬우니 각자 한번씩들 해보도록 하자.
728x90
