> 웹 프론트엔드 > CSS 튜토리얼 > CSS 속성 변경 사항을 추적하기 위해 사용자 정의 이벤트를 만드는 방법은 무엇입니까?

CSS 속성 변경 사항을 추적하기 위해 사용자 정의 이벤트를 만드는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-03 07:27:30
원래의
598명이 탐색했습니다.

How to Create a Custom Event to Track CSS Attribute Changes?

CSS 속성 변경을 추적하기 위한 사용자 정의 이벤트

문제: div 또는 기타 항목이 있을 때 이벤트를 어떻게 트리거할 수 있습니까? CSS 속성이 변경되나요?

토론: 내장된 CSS 변경 이벤트는 없지만 직접 만들 수 있습니다. 두 가지 방법이 있습니다.

방법 1: DOM 폴링

<code class="javascript">var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');

function checkForChanges() {
  if ($element.css('height') != lastHeight) {
    // CSS height changed
    lastHeight = $element.css('height');
  }
  setTimeout(checkForChanges, 500);
}
checkForChanges();</code>
로그인 후 복사

방법 2: 수동 이벤트 트리거

<code class="javascript">$('#mainContent').bind('heightChange', function() {
  // CSS height changed
});

$("#btnSample1").click(function() {
  $("#mainContent").css('height', '400px');
  $("#mainContent").trigger('heightChange');
});</code>
로그인 후 복사

장점:

  • 방법 1은 자동으로 DOM의 변경 사항을 지속적으로 모니터링합니다.
  • 방법 2는 더 잘 제어되므로 수정하는 경우에만 이벤트를 트리거합니다. CSS.

문서:

  • bind: 지정된 요소에 이벤트 핸들러를 연결합니다.
  • trigger: 이벤트를 실행합니다. 요소에 연결된 핸들러.

위 내용은 CSS 속성 변경 사항을 추적하기 위해 사용자 정의 이벤트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿