ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
Study/JavaScript
Study/JavaScript
-
Javascript : 웹사이트 블라인드 효과, 마우스/키보드 이벤트를 비활성화, 스크롤을 방지 효과주기다음은 블라인드 효과를 적용하고, 마우스/키보드 이벤트를 비활성화하고, 스크롤을 방지하고, 정상적인 동작을 복원하는 단일 함수를 포함하는 JavaScript 코드의 결합되고 단순화된 버전입니다. 간혹 사이트를 패쇄하기는 그렇고 잠시 막아야 할때 유용한것 같습니다.기본코드 웹사이트 블라인드 효과 현재 화면이 블라인드 효과로 가려져 있습니다. 1. HTML 구조#blind-overlay: 블라인드 효과를 위한 div 요소로, 화면을 어둡게 덮고 흐림 효과를 적용합니다..content: 메인 콘텐츠로, 블라인드 효과 아래에 표시됩니다..restore-button: 사용자에게 정상 동작으로 복구할 수 있는 버튼을 제공합니다.2. CS..Study/JavaScript 2024. 12. 3.
-
JavaScript : html의 input에 값이 있는지 없는지 판단하고 class를 추가하라다음은 search-input 클래스가 있는 입력 요소에 값이 있는지 확인하고 값이 있으면 Xvalue 클래스를 추가하는 JavaScript #스니펫입니다. input 값이 있으면 Xvalue를 추가해라. DOMContentLoaded: DOM이 완전히 로드된 후 스크립트가 실행되도록 합니다.querySelector (쿼리선택기): search-input 클래스를 사용하여 입력 요소를 선택합니다.addEventListener: 사용자가 입력 필드에 무언가를 입력하거나 삭제할 때마다 트리거 되는 input 이벤트를 수신합니다.조건:입력된 트림된 값이 비어 있지 않은지 확인합니다. 조건이 참이면 'Xvalue' 클래스를 추가하고 거짓이면 제거합니다. 간략히document.querySelector('..Study/JavaScript 2024. 12. 2.
-
[javascript] addClass, removeClass, toggleClass, hasClassjavascript jquery 없이 vanilla javascript로 class관련 함수를 구현 1. addClass element.classList.add('추가할 class명'); function addClass(e, c) { e.classList.add(c); return e; }; 2. removeClass element.classList.remove('삭제할 class명'); function removeClass(e, c) { e.classList.remove(c); return e; }; 3. toggleClass element.classList.toggle('토글할 class명'); function toggleClass(e, c) { e.classList.toggle(c); return ..Study/JavaScript 2022. 2. 16.