JAVASCRIPT - 초급 2편

* toggle함수

toggle 함수 : 한번 누르면 어떤 기능이 ON되고, 한번 더 누르면 OFF되는 함수

javscript

변수명.addEventListener("메소드", function() {
  변수명.classList.toggle("클래스명");
});

add().와 remove()를 사용해서 구현도 가능하다

function 함수명() {
	if(조건식) {
      변수명.classList.add("클래스명");
    } else {
      변수명.classList.remove("클래스명");
    }
};
변수명.addEventListener('click', 함수명);

예시

html

 <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <span class="navbar-brand">Navbar</span>
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
</nav>
<ul class="list-group">
        <li class="list-group-item">An active item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
</ul>

css

.list-group {
    display: none;
}
.show {
    display: block;
}

javascript

<script>
        document.getElementsByClassName("navbar-toggler")[0].addEventListener("click", function() {
            document.getElementsByClassName('list-group')[0].classList.toggle("show");
        });
</script>

* class 읽기, 추가, 수정, 삭제, 확인

1. class 읽기

1) className

document.getElementById("title").className;
/* title이라는 id값을 가진 요소에 클래스명을 가져온다 */

2) classList

document.getElementByClassName("title").classList;
/* title이라는 id값을 가진 요소에 클래스명을 가져온다 */

2. class 추가

1) className

document.getElementById("title").className += " show";
/* title이라는 id값을 가진 요소에 show 클래스명을 추가 */

주의점

+=와 클래스명에 스페이스가 빠질시에 class를 초기화하고 해당 클래스명으로 수정된다

2) classList

1개의 클래스 추가

document.getElementById("title").classList.add("show");
/* title이라는 id값을 가진 요소에 show 클래스명을 추가 */

2개 이상 클래스 추가

document.getElementById("title").classList.add("show","box");
/* title이라는 id값을 가진 요소에 show와 box에 클래스를 추가 */

3. class 수정

1) calssName

document.getElementById("title").className = "show";
/* title이라는 id값을 가진 요소에 원래 부여된 class를 초기화한 후 show 클래스명을 추가 */

2) calssList

document.getElementById("title").classList.replace("변경 전 이름", "변경 후 이름");
/* title이라는 id값을 가진 요소에 class명을 수정 */

4. class 삭제

calssList

document.getElementById("title").classList.remove("삭제할 클래스명1", "삭제할 클래스명2");
/* title이라는 id값을 가진 요소에 class명을 삭제 */

5. class 확인

classList

document.getElementById("title").classList.contains(클래스명);
/* title이라는 id값을 가진 요소에 class명이 있는지 확인 할 수있다 */
/* 해당 속성이 포함되어 있으면 true를 반환, 아니면 false를 반환 */