DEV
-
Javascript 커스텀 로딩(Custom Modal Loading)DEV/javascript 2022. 10. 31. 17:33
중국 개발자가 만든 커스텀 로딩(모달 로딩) 이다. 단순하게 로딩만 사용하고 싶다면 최하단 Custom Loading (Modal)에 있는 js와 css로만 구성하면 된다. 사용은 다음과 같이 사용. test.js // Loading 시작 let loading = new Loading(); // 아래 옵션변경과 함께 사용 가능 // let loading = new Loading(getLoadingSet()); // Loading 종료 loading.out(); /****************************************************** * 로딩 설정값 반환 (옵션 변경) * @param {string} title **************************************..
-
Javascript 다양한 이벤트 예시DEV/javascript 2022. 10. 29. 16:42
click, mouseenter, mouseleave, resize, copy, online, offline 이벤트 예시. const button = document.querySelector('.btn'); button.addEventListener('click', functionName); button.onclick = functionName; // 클릭 window.addEventListener('click', functionName); // 해당 요소에 마우스 진입 window.addEventListener('mouseenter', functionName); // 해당 요소에서 마우스 떠남 window.addEventListener('mouseleave', functionName); // 해당 요소..
-
Javascript 클래스 추가, 제거 (그리고 클래스가 있는 경우 제거, 없는경우 추가)DEV/javascript 2022. 10. 29. 16:36
자바스크립트를 통해 클래스 추가, 제거 또는 클레스가 없으면 제거, 있으면 추가하는 방법 아래와 같이 사용 가능하다. test.js const sampleEle = document.getElementById("sampleEle"); // ('d-none')class 추가, 제거 sampleEle.classList.add('d-none'); sampleEle.classList.remove('d-none'); // 여러개.. sampleEle.classList.add('d-none', 'show', 'point'); // ('d-none') class가 있는 경우 제거, class가 없는 경우 추가 sampleEle.classList.toggle('d-none');