[JQUERY] CSS 속성은 jQuery를 사용하여 변경할 때 이벤트 감지

CSS 속성은 jQuery를 사용하여 변경할 때 이벤트 감지

해결법

1. ---

   1.그래 넌 할수있어. DOM L2 이벤트를 정의 돌연변이 이벤트를 모듈; 그들 중 하나 - DOMAttrModified 당신이 필요로하는 것입니다. 허락하신다면,이 널리 구현되지는 않지만 적어도 게코와 오페라 브라우저에서 지원됩니다.

   그래 넌 할수있어. DOM L2 이벤트를 정의 돌연변이 이벤트를 모듈; 그들 중 하나 - DOMAttrModified 당신이 필요로하는 것입니다. 허락하신다면,이 널리 구현되지는 않지만 적어도 게코와 오페라 브라우저에서 지원됩니다.

   이 라인을 따라 뭔가를보십시오 :

   document.documentElement.addEventListener('DOMAttrModified', function(e){
     if (e.attrName === 'style') {
       console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
     }
   }, false);
   
   document.documentElement.style.display = 'block';
   

   또한 DOMAttrModified에 교체로 IE의 "에 PropertyChange"이벤트를 활용하여 시도 할 수 있습니다. 그것은 안정적으로 스타일의 변화를 감지 할 수 있도록해야한다.

2. ---

   2.당신은 attrchange jQuery 플러그인을 사용할 수 있습니다. 플러그인의 주요 기능은 HTML 요소의 속성 변경에 대한 리스너 함수를 결합하는 것입니다.

   당신은 attrchange jQuery 플러그인을 사용할 수 있습니다. 플러그인의 주요 기능은 HTML 요소의 속성 변경에 대한 리스너 함수를 결합하는 것입니다.

   코드 샘플 :

   $("#myDiv").attrchange({
       trackValues: true, // set to true so that the event object is updated with old & new values
       callback: function(evnt) {
           if(evnt.attributeName == "display") { // which attribute you want to watch for changes
               if(evnt.newValue.search(/inline/i) == -1) {
   
                   // your code to execute goes here...
               }
           }
       }
   });
   

3. ---

   3.당신은, 예를 CSS 속성을 테스트하기 위해 jQuery의 CSS 기능을 사용할 수 있습니다. 경우 ($ ( '노드'). CSS ( '표시') == '블록').

   당신은, 예를 CSS 속성을 테스트하기 위해 jQuery의 CSS 기능을 사용할 수 있습니다. 경우 ($ ( '노드'). CSS ( '표시') == '블록').

   콜린은 특정 CSS의 속성이 변경됩니다 때 트리거됩니다 명시 적 이벤트가 없다는 것을, 권리입니다. 하지만 당신은 이벤트 세트가 디스플레이, 그리고 어떤 다른 주위를 뒤집은 트리거 할 수 있습니다.

   또한 당신이 원하는 행동을 얻기 위해 추가 CSS 클래스를 사용하는 것이 좋습니다. 종종 당신은 포함 요소에 클래스를 추가하고, 모든 요소에 영향을 미치는 CSS를 사용할 수 있습니다. 나는 종종 AJAX 응답이 보류 중임을 나타 내기 위해 본문 요소에 클래스를 때리고. 그리고 내가 원하는 화면을 얻기 위해 CSS 선택기를 사용할 수 있습니다.

   이것이 당신이 찾고있는 경우 확실하지.

4. ---

   4.속성있는 CSS 전이 Z-인덱스 transitionend 이벤트, 예를 사용하여 영향을 미칠 것이다 :

   속성있는 CSS 전이 Z-인덱스 transitionend 이벤트, 예를 사용하여 영향을 미칠 것이다 :

   $ ( ". 관찰 요소").의 ( "webkitTransitionEnd transitionend"함수 (E) { CONSOLE.LOG ( "END"E); 경보 ( "Z- 색인 변경"); }); $ ( ". changeButton"). (함수를 "클릭"에 () { 을 console.log ( '클릭'); document.querySelector ( "관찰 요소.") style.zIndex = (인 Math.random () * 1000). | 0; }); .observed 소자 { 전환 : Z- 색인이 1ms 단계; -webkit 전이 : Z- 색인이 1ms; } DIV { 폭 : 100 픽셀; 높이 : 100 픽셀; 국경 : 1 픽셀의 고체; 위치 : 절대; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

5. ---

   5.당신은 할 수 없습니다. CSS는 "이벤트"를 지원하지 않습니다. 나는 당신이 그것을 필요 물어 감히? 그래서 여기에이 게시물을 확인하십시오. 난 당신이 스타일의 변화에 ​​이벤트를 연결하려는 것이 이유 생각할 수 없다. 나는 스타일의 변화가 자바 스크립트의 조각에 의해 somwhere 다른 트리거되는 것을 여기에 있으리라 믿고있어. 왜이 추가 로직을 추가하지?

   당신은 할 수 없습니다. CSS는 "이벤트"를 지원하지 않습니다. 나는 당신이 그것을 필요 물어 감히? 그래서 여기에이 게시물을 확인하십시오. 난 당신이 스타일의 변화에 ​​이벤트를 연결하려는 것이 이유 생각할 수 없다. 나는 스타일의 변화가 자바 스크립트의 조각에 의해 somwhere 다른 트리거되는 것을 여기에 있으리라 믿고있어. 왜이 추가 로직을 추가하지?

from https://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery by cc-by-sa and MIT license