ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
javascript
javascript
-
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.
-
티스토리 스킨 v3 제작 일지(2) - dark Mode다크 모드 몇 번이나 테마를 겹치는 부분이라 '다크 모드'에 적합한 부분을 찾기가 쉽지 않네요. 이번에 한 작업은 웹 브라우저에 다크 모드 사용 시 블로그에 접속을 하면 바로 다크 모드로 접속되게 하는 부분입니다. @media (prefers-color-scheme: dark) { /* Your CSS */ } 저의 블로그는 html태그에 class로 테마가 변경됩니다. 그래서 이 부분을 어떻게 매치할까 고민하다가 위의 부분이 다크 모드라는 것을 몇 번이나 고민하고 찾고 해서 알게 되었네요. 바보같이... html{ ... light Theme } html.dark{ ... dark Theme } 아무튼 자바스크립트로 읽어 들이기만 해서 막상 해보면 몇 줄로만 가능한 부분인데 고민했습니다. let $do..Document/Tistory 2021. 3. 19.