복붙노트

[JQUERY] 그것은 "스타일 변화"이벤트를 수신 할 수 있습니까?

JQUERY

그것은 "스타일 변화"이벤트를 수신 할 수 있습니까?

해결법

  1. 1.jQuery를 오픈 소스이기 때문에, 나는 당신이 당신의 선택이 호출 될 때마다 (jQuery 오브젝트를 전달)의 함수를 호출 할 수있는 CSS 기능을 조정할 수 있다고 생각합니다. 물론, 당신은 확실히 설정 CSS 속성에 내부적으로 사용 아무 것도 없다 만들기 위해 jQuery 코드를 샅 샅히 뒤져 할 수 있습니다. 이상적으로, 당신은 jQuery 라이브러리 자체를 방해하지 않도록 jQuery를위한 별도의 플러그인을 쓰고 싶어하지만, 당신은 당신의 프로젝트의 실현입니다 여부를 결정해야합니다.

    jQuery를 오픈 소스이기 때문에, 나는 당신이 당신의 선택이 호출 될 때마다 (jQuery 오브젝트를 전달)의 함수를 호출 할 수있는 CSS 기능을 조정할 수 있다고 생각합니다. 물론, 당신은 확실히 설정 CSS 속성에 내부적으로 사용 아무 것도 없다 만들기 위해 jQuery 코드를 샅 샅히 뒤져 할 수 있습니다. 이상적으로, 당신은 jQuery 라이브러리 자체를 방해하지 않도록 jQuery를위한 별도의 플러그인을 쓰고 싶어하지만, 당신은 당신의 프로젝트의 실현입니다 여부를 결정해야합니다.

  2. 2.문제는 질문을 받았다 이후 상황이 조금에 이사 -이 요소의 '스타일'속성에 변화를 감지하기 위해 MutationObserver를 사용하는 것이 가능하다, 더 jQuery를 할 필요가 없습니다 :

    문제는 질문을 받았다 이후 상황이 조금에 이사 -이 요소의 '스타일'속성에 변화를 감지하기 위해 MutationObserver를 사용하는 것이 가능하다, 더 jQuery를 할 필요가 없습니다 :

    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 + 포함한 최신 브라우저에 좋다.

  3. 3.이벤트 객체의 선언은 새 CSS 기능을 내부에 있어야한다. 그렇지 않으면 이벤트는 한 번 발사 할 수있다.

    이벤트 객체의 선언은 새 CSS 기능을 내부에 있어야한다. 그렇지 않으면 이벤트는 한 번 발사 할 수있다.

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

  4. 4.난 당신의 코드에서 아니기 때문에 당신이 당신의 이벤트를 실행할 수없는 경우 마이크에서 경우 가장 좋은 대답을 생각합니다. 내가 그것을 사용하는 경우 그러나 나는 약간의 오차가 얻을. 나는 쇼를 위해 새로운 답을 쓰기 그래서 당신은 코드 내가 사용하는 것이.

    난 당신의 코드에서 아니기 때문에 당신이 당신의 이벤트를 실행할 수없는 경우 마이크에서 경우 가장 좋은 대답을 생각합니다. 내가 그것을 사용하는 경우 그러나 나는 약간의 오차가 얻을. 나는 쇼를 위해 새로운 답을 쓰기 그래서 당신은 코드 내가 사용하는 것이.

    신장

    // 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 새로운 $ .Event ( '스타일') = 때문에 오류가 발생했습니다; 스타일처럼 뭔가 내가 그것을 제거 .. HtmlDiv에 정의되지 않은, 나는 (이) .trigger는 ( "stylechanged") 지금 $를 시작합니다. 또 다른 문제는 마이크 (CSS, ..) 그럼 어떤 경우에 문제를 만들 수 있습니다 $의 resulto을 반환하지 않은 것이 었습니다. 그래서 결과를 얻을 그것을 돌려줍니다. 이제 ^^ 모든 CSS를 변화에서 내가 수정하고 이벤트를 트리거 할 수없는 일부 libs와에서 포함 작품.

  5. 5.다른 제안으로, 당신은 어떤 코드를하는 것은 당신이 요소의 높이를 변경할 때 사용자 정의 이벤트를 해고 할 수있는 요소의 스타일을 변화를 제어 할 수있는 경우 :

    다른 제안으로, 당신은 어떤 코드를하는 것은 당신이 요소의 높이를 변경할 때 사용자 정의 이벤트를 해고 할 수있는 요소의 스타일을 변화를 제어 할 수있는 경우 :

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

    꽤 리소스를 많이 사용하지만, 그렇지 않으면, 당신은 정기적으로 요소의 높이 변화를 확인하기 위해 타이머를 설정할 수 있습니다 ...

  6. 6.jQuery를 또는 자바 스크립트에서 스타일 변경 이벤트를위한 붙박이 지원되지 않습니다. 그러나 jQuery를 지원하는 사용자 정의 이벤트를 만들고 듣고 있지만, 변화가있을 때마다, 당신은 자신에 그것을 실행할 수있는 방법이 있어야합니다. 그래서 완벽한 솔루션되지 않습니다.

    jQuery를 또는 자바 스크립트에서 스타일 변경 이벤트를위한 붙박이 지원되지 않습니다. 그러나 jQuery를 지원하는 사용자 정의 이벤트를 만들고 듣고 있지만, 변화가있을 때마다, 당신은 자신에 그것을 실행할 수있는 방법이 있어야합니다. 그래서 완벽한 솔루션되지 않습니다.

  7. 7.CSS를 사용하기 쉬운 변화 때 당신은 이벤트를 트리거, jQuery 플러그인을 시도 할 수 있습니다

    CSS를 사용하기 쉬운 변화 때 당신은 이벤트를 트리거, jQuery 플러그인을 시도 할 수 있습니다

     $([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
  }
});

  8. 8.재미있는 질문입니다. 문제는 당신이 콜백을 불 수 없을 것 그래서 높이 () 콜백을 허용하지 않는다는 것입니다. 높이를 설정하는 중 애니메이션 () 또는 CSS ()를 사용하고 콜백에서 사용자 정의 이벤트를 트리거합니다. 여기 개념의 증거로, 애니메이션 (), 테스트 작업 (데모)를 사용하는 예입니다 :

    재미있는 질문입니다. 문제는 당신이 콜백을 불 수 없을 것 그래서 높이 () 콜백을 허용하지 않는다는 것입니다. 높이를 설정하는 중 애니메이션 () 또는 CSS ()를 사용하고 콜백에서 사용자 정의 이벤트를 트리거합니다. 여기 개념의 증거로, 애니메이션 (), 테스트 작업 (데모)를 사용하는 예입니다 :

    $('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
});

  9. 9.그냥 추가하고 위에서 @ 데이비드의 솔루션을 공식화 :

    그냥 추가하고 위에서 @ 데이비드의 솔루션을 공식화 :

    참고 jQuery를 함수는 체인 방식 및 반환 '이'다중 호출이 차례로 호출 할 수 있도록한다는 것을 (예를 들어, $ container.css ( "오버 플로우") "숨겨진"CSS ( "개요", 0);.).

    그래서에게 개선 된 코드가 있어야한다 :

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

  10. 10.어떻게 jQuery를 cssHooks 어떻습니까?

    어떻게 jQuery를 cssHooks 어떻습니까?

    어쩌면 내가 질문을 이해하지 않지만 쉽게 CSS () 함수를 변경하지 않고, cssHooks 이루어집니다를 검색하는 것.

    문서 복사 :

    (function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery );

    https://api.jquery.com/jQuery.cssHooks/

  11. 11.내가 쓴 그래서 나는 같은 문제가 있었다. 그것은 오히려 잘 작동합니다. 일부 CSS 전환과 혼합하면 멋지다.

    내가 쓴 그래서 나는 같은 문제가 있었다. 그것은 오히려 잘 작동합니다. 일부 CSS 전환과 혼합하면 멋지다.

    function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}

    12. from https://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 두 기능 사이에 jQuery를이 클릭 / 전환  (0) 2020.10.01
[JQUERY] iframe이 SRC 변경 이벤트 감지?  (0) 2020.10.01
[JQUERY] 캐치 페이스트 입력  (0) 2020.09.30
[JQUERY] 어떻게 jQuery를 함께 파일 입력 크기를 확인하려면?  (0) 2020.09.30
[JQUERY] jQuery를의 형태의 방지를 두 번 제출  (0) 2020.09.30
,

티스토리툴바