728x90
반응형
//이벤트 리스너

//이벤트 리스너 제거
let el = document.createElement("div");
//el에 test클래스 추가
//클래스 여러개 추가
el.className = "test test2 test3";
//el에 id 추가
el.id = "test";
//익명함수를 변수에 담아 놓았다
let onevent = function(){
    console.log("난 이벤트")
    el.removeEventListener("click",onevent);
}
//el에 이벤트를 추가하는데 이벤트 타입은 click이고 두번째 매개변수 함수는
//onevent 변수에 담긴 익명함수다.
el.addEventListener("click",onevent);
//removeEventListener 이벤트를 제거하는데 타입은 click이고 두번째 매개변수는 제거할 함수

document.querySelector(".content").appendChild(el);

//클래스의 이름 읽기
//className 문자의 형태로 읽고
console.log(el.className)
//classList 배열의 형태
console.log(el.classList);

//클래스의 이름을 순서대로 읽기
for (let i = 0; i <el.classList.length;i++){
    //classList에서 item 함수를 이용해 해당 인덱스의 값을 확인 할수 있다.
    //item(여기에 index)
    console.log(el.classList.item(i))
}

//class list 클래스 추가
//add함수를 사용해서 클래스 추가
//콤마로 여러개의 클래스 추가 가능
el.classList.add("test4","test5","test6");
console.log(el.classList);

//class list 클래스 제거
//remove함수를 사용해서 클래스 제거
//이 함수도 콤마로 여러개의 클래스 제거 가능
el.classList.remove("test4","test5","test6");
console.log(el.classList);​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .content{
        height: 100vh;
    }
    .box{
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    .con{
    /* 부모 기준으로 움직임 => absolute */
        position: absolute;
        left: 100%;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: black;
        transition: 1s;
    }
    .active {
        left: 0;
        opacity: 1;
    }
    .test{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <div class="content"></div>
    <div class="box">
        <div class="con"></div>
    </div>
    <div class="box">
        <div class="con"></div>
    </div>
    <div class="box">
        <div class="con"></div>
    </div>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
<script src="01.js">
    let cons = document.querySelectorAll(".box .con");

    console.log(cons[0].getBoundingClientRect().top)
    console.log(cons[1].getBoundingClientRect().top)
    console.log(cons[2].getBoundingClientRect().top)
    console.log(cons[3].getBoundingClientRect().top)

    window.onscroll = function (){
        //window.scrollY 윈도우의 스크롤 Y꼭대기 값
        console.log(window.scrollY);
        //window.lnnnierHeight 브라우저의 전체 높이
        let scroll = window.scrollY + window.innerHeight;
        for(let i = 0; i <cons.length;i++){
            if(scroll>cons[i].getBoundingClientRect().top){
                //con[i].classList.contains("active")  엑티브 클래스가 있는지 확인
                //classListname
                if(!cons[i].classList.contains("active"))
                //액티브 클라스 추가
                cons[i].className += " active";
            }
            else{
                //액티브 클래스 삭제
                cons[i].classList.remove("active");
            }
        }
    }
</script>
</html>
728x90
반응형

'개발 > html, css, js' 카테고리의 다른 글

[HTML, JavaScript] 정규표현식  (0) 2022.06.21
[JS, HTML, CSS] 이벤트  (0) 2022.06.17
[HTML, JavaScript] 가위바위보, 일정 캘린더 만들기  (0) 2022.06.07
[JavaScript] 각종 이벤트  (0) 2022.06.07
[JavaScript, CSS] 콜백, 콜백지옥  (0) 2022.06.03

티스토리툴바