자바스크립트 실무 유틸 함수 시리즈 16 - HTML 요소 조작을 위한 유틸
·
Programing/javascript
이번 16편에서는 DOM 기반 HTML 요소를 쉽고 안전하게 조작할 수 있도록 도와주는 유틸 함수들을 소개합니다. 버튼 제어, 클래스 토글, 요소 생성, 속성 관리 등 다양한 실무 상황에 대응 가능합니다.✅ 1. addClass (클래스 추가)📌 클래스 이름을 요소에 추가function addClass(el, className) { if (el && !el.classList.contains(className)) { el.classList.add(className); }}📌 활용 예시상태 기반 스타일 변경모달 열기 처리✅ 2. removeClass (클래스 제거)📌 클래스 이름을 요소에서 제거function removeClass(el, className) { if (el && el.clas..
jQuery css 애니메이션 반복/초기화(removeclass, addclass)
·
Programing/javascript
$(document).on('DOMSubtreeModified', 'div', function(e){ $(this).removeClass('animation'); // offsetWidth을 사용해서 요소의 상태를 초기화 처리 e.currentTarget.offsetWidth; $(this).show().addClass('animation'); }); remoClass와 addClass를 반복하면 .animation의 애니메이션효과는 반복되지 않는 현상이 있다. 이럴 때 e.currentTarget.offsetWidth; 를 사용하여 요소의 상태를 초기화를 해주면 애니메이션을 반복하여 실행시킬 수 있다.