[javascript] “스타일 변경”이벤트를들을 수 있습니까?

JAVASCRIPT / 글쓴이

jQuery에서 스타일 변경에 바인딩 할 수있는 이벤트 리스너를 만들 수 있습니까? 예를 들어, 요소가 치수를 변경하거나 스타일 속성의 다른 변경이있을 때 무언가를 “수행”하려면 다음과 같이하십시오.

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

정말 유용 할 것입니다.

어떤 아이디어?

최신 정보

이 답변에 대해 유감스럽게 생각하지만 다른 사람에게 적합한 깔끔한 솔루션을 작성했습니다.

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

이것은 내부 prototype.css 메소드를 일시적으로 무시하고 마지막에 트리거로 재정의합니다. 따라서 다음과 같이 작동합니다.

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

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

답변

jQuery는 오픈 소스이기 때문에 css호출 될 때마다 (jQuery 객체를 전달할 때마다) 원하는 함수를 호출 하도록 함수를 조정할 수 있다고 생각합니다 . 물론 CSS 속성을 설정하기 위해 내부적으로 사용하는 다른 것이 없도록 jQuery 코드를 검색해야합니다. 이상적으로는 jQuery 라이브러리 자체를 방해하지 않도록 jQuery 용 별도의 플러그인을 작성하려고하지만 프로젝트에 적합한 지 여부를 결정해야합니다.

답변

질문이 제기 된 후 상황이 조금 바뀌 었습니다. 이제 MutationObserver 를 사용하여 jQuery가 필요없는 요소의 ‘style’속성의 변경 사항을 감지 할 수 있습니다 .

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'] });

콜백 함수에 전달되는 인수 는 이전 스타일과 새 스타일 값을 유지할 수 있는 MutationRecord 객체입니다.

IE 11 이상을 포함한 최신 브라우저에서 지원이 좋습니다 .

답변

이벤트 객체의 선언은 새로운 CSS 함수 안에 있어야합니다. 그렇지 않으면 이벤트는 한 번만 발생 될 수 있습니다.

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('style');
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

답변

코드가 아니기 때문에 이벤트를 시작할 수없는 경우 Mike의 경우 가장 좋은 대답이라고 생각합니다. 그러나 그것을 사용할 때 약간의 오류가 발생합니다. 그래서 내가 사용하는 코드를 보여주기 위해 새로운 답변을 작성합니다.

신장

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

용법

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

var ev = new $ .Event ( ‘style’); 때문에 오류가 발생했습니다. 스타일과 같은 것이 HtmlDiv에서 정의되지 않았습니다.이 스타일을 제거하고 이제 $ (this) .trigger ( “stylechanged”)를 시작합니다. 또 다른 문제는 Mike가 $ (css, ..)의 결과를 반환하지 않았다는 것인데, 경우에 따라 문제를 일으킬 수 있습니다. 그래서 결과를 얻고 반환합니다. 이제 작동합니다 ^^ 모든 CSS 변경에는 이벤트를 수정하고 트리거 할 수없는 일부 라이브러리가 포함됩니다.

답변

다른 사람들이 제안했듯이 요소의 스타일을 변경하는 코드를 제어 할 수 있다면 요소의 높이를 변경할 때 사용자 정의 이벤트를 발생시킬 수 있습니다.

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

그렇지 않으면 리소스를 많이 사용하지만 요소 높이의 변경 사항을 주기적으로 확인하도록 타이머를 설정할 수 있습니다 …

답변

jQuery 또는 Java 스크립트에서 스타일 변경 이벤트를 기본적으로 지원하지 않습니다. 그러나 jQuery는 커스텀 이벤트 생성 및 청취 지원을 지원하지만 변경이있을 때마다 직접 트리거 할 수있는 방법이 있어야합니다. 따라서 완벽한 솔루션이 아닙니다.

답변

Jquery 플러그인을 시도 할 수 있으며 CSS가 변경되고 사용하기 쉬운 이벤트를 트리거합니다.

http://meetselva.github.io/#gist-section-attrchangeExtension
 $([selector]).attrchange({
  trackValues: true,
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});