Jquery를 사용하여 CSS 속성이 변경된 경우 이벤트 감지

Jquery를 사용하여 CSS 속성이 변경된 경우 이벤트 감지

---

요소의 "표시"css 속성이 변경되었는지 감지하는 방법이 있습니까 (없음 또는 블록 또는 인라인 블록 ...)? 그렇지 않은 경우 플러그인이 있습니까? 감사

---

노트

이 게시물이 작성된 이후로 돌연변이 이벤트 는 더 이상 사용되지 않으며 모든 브라우저에서 지원되지 않을 수 있습니다. 대신 돌연변이 관찰자를 사용하십시오 .

그래 넌 할수있어. DOM L2 Events 모듈은 돌연변이 이벤트를 정의 합니다 . 그중 하나 -DOMAttrModified 가 필요한 것입니다. 물론, 이들은 널리 구현되지는 않지만 최소한 Gecko 및 Opera 브라우저에서 지원됩니다.

다음 라인을 따라 시도해보십시오.

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

document.documentElement.style.display = 'block';

또한 사용하는 시도 할 수 있습니다 IE의 "에 PropertyChange"이벤트 로 대체 DOMAttrModified. style변경 사항을 안정적 으로 감지 할 수 있어야합니다 .

---

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...
            }
        }
    }
});

---

jQuery의 css함수를 사용하여 CSS 속성을 테스트 할 수 있습니다 . if ($('node').css('display') == 'block').

Colin이 맞습니다. 특정 CSS 속성이 변경 될 때 발생하는 명시적인 이벤트가 없습니다. 그러나 당신은 그것을 뒤집을 수 있고 디스플레이를 설정하는 이벤트를 트리거 할 수 있습니다.

또한 원하는 동작을 얻기 위해 CSS 클래스를 추가하는 것을 고려하십시오. 종종 포함하는 요소에 클래스를 추가하고 CSS를 사용하여 모든 요소에 영향을 줄 수 있습니다. 나는 종종 AJAX 응답이 보류 중임을 나타 내기 위해 body 요소에 클래스를 슬랩합니다. 그런 다음 CSS 선택기를 사용하여 원하는 디스플레이를 얻을 수 있습니다.

이것이 당신이 찾고있는 것인지 확실하지 않습니다.

---

css 전환이 영향을 미치는 속성의 경우 전환 종료 이벤트 (예 : z-index)를 사용할 수 있습니다.

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

---

당신은 할 수 없습니다. CSS는 "이벤트"를 지원하지 않습니다. 그게 뭔지 물어봐도 될까요? 여기 에서이 게시물을 확인하십시오 . 이벤트를 스타일 변경에 연결하려는 이유를 생각할 수 없습니다. 나는 여기서 스타일 변경이 자바 스크립트에 의해 다른 곳에서 트리거되었다고 가정하고 있습니다. 추가 논리를 추가하지 않는 이유는 무엇입니까?

참고URL : https://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery