클래스 속성 제어하기
클래스 속성을 제어하여 css를 변경할 수 있습니다.
특히 메뉴 : active 할 때
.className : 클래스 명을 얻음
.classList : 클래스명을 배열로 얻음
Prototype에는.을 찍어서 사용할 수 있는 함수가 들어있음
add , contains , remove , toggle 4가지만 알아두기
<style>
.add{color:aqua;}
</style>
</head>
<body>
<h3>클래스 속성 제어하기</h3>
<button id ="btn" class="btn btn-default">버튼</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
//태그에 속성변경 --->
//class는 자바스크립트의 키워드(예약어)라 사용안됨
//console.log(btn.class);
//console.log(btn.className); //클래스명을 얻음
// console.log(btn.classList); //클래스명을 배열로 얻음
btn.classList.add("newBtn"); //클래스명을 추가
btn.classList.remove("btn-default"); //클래스명을 삭제
if(btn.classList.contains("btn")){
console.log("btn 클래스 존재함");
}
btn.classList.toggle('aaa'); //있으면 제거, 없으면 추가
}
</script>
<hr>
<h3>하나의 버튼으로 두가지 작업을 처리하기(toggle)</h3>
<button class="toggle" id="toggle">토글버튼</button>
<script>
var toggle = document.getElementById("toggle");
toggle.onclick = function(){
//css, class제거
// if(toggle.classList.contains("add")){ //add가 포함되어있다면
// toggle.style.color="black"; //색상변경
// toggle.classList.remove("add"); //클래스제거
// } else {
// toggle.style.color = "aqua";
// toggle.classList.add("add");
// }
toggle.classList.toggle('add');
}
</script>
'JavaScript' 카테고리의 다른 글
| JS | 이벤트 객체 (0) | 2023.01.03 |
|---|---|
| JS | 실습 2 (toggle) (0) | 2023.01.03 |
| JS | 실습 1 (0) | 2023.01.02 |
| JS | 노드 삭제 (0) | 2023.01.02 |
| JS | 노드 생성, 추가 insertBefore (0) | 2023.01.02 |