JavaScript를 사용하여 요소의 스타일 변경을 감지할 수 있습니까?

MutationObserver로 스타일 변경 듣기

질문:
스타일 변경을 모니터링할 수 있습니까? JavaScript에서 이벤트 리스너를 사용하는 요소가 있나요? 예를 들어, jQuery를 사용하여 요소의 크기가 변경되는 시기를 감지할 수 있습니까?

답변:

예, MutationObserver는 요소의 변경 사항을 관찰할 수 있는 최신 브라우저 API입니다. 스타일을 포함한 요소의 속성.

구현:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

예:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

이 결과는 다음과 같습니다. 다음:

width: 100px;
color: red;

지원:

MutationObserver는 IE 11을 포함한 최신 브라우저에서 널리 지원됩니다.

위 내용은 JavaScript를 사용하여 요소의 스타일 변경을 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!