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

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

요소의 "display" css 속성이 변경되었는지 여부(none 또는 block 또는 inline-block...)를 탐지할 수 있는 방법이 있습니까? 그렇지 않다면 플러그인이 있습니까?감사해요.

메모

이 게시물이 작성된 이후 돌연변이 이벤트가 더 이상 사용되지 않으며 일부 브라우저에서 지원되지 않을 수도 있습니다.대신 돌연변이 관찰자를 사용합니다.

네, 가능합니다.DOML2 Events 모듈은 돌연변이 이벤트를 정의합니다. 그 중 하나는 DOMAtrModified입니다.물론, 이러한 것들은 널리 구현되지는 않지만 적어도 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의 "재산권 변경" 이벤트를 활용해 볼 수도 있습니다.DOMAttrModified. 감지할 수 있어야 합니다.style확실하게 변합니다.

tractchange 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's를 사용할 수 있습니다.cssCSS 속성을 테스트하는 기능(예:if ($('node').css('display') == 'block').

특정 CSS 속성이 변경될 때 발생하는 명시적인 이벤트가 없다는 콜린의 말이 맞습니다.그러나 화면을 뒤집어서 디스플레이를 설정하는 이벤트 등을 트리거할 수도 있습니다.

또한 CSS 클래스를 추가하여 원하는 동작을 얻는 것도 고려해 봅니다.종종 클래스를 포함하는 요소에 추가하고 CSS를 사용하여 모든 요소에 영향을 줄 수 있습니다.저는 종종 AJAX 응답이 보류 중임을 나타내기 위해 본문 요소에 클래스를 던집니다.그러면 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는 "이벤트"를 지원하지 않습니다.뭐가 필요하신지 여쭤봐도 될까요?SO에 관한 이 게시물을 확인해 보세요.스타일 변경에 이벤트를 연결하려는 이유가 생각나지 않습니다.여기서 스타일 변경은 자바스크립트 조각에 의해 다른 곳에서 촉발된다고 가정합니다.거기에 논리를 추가하는 게 어때요?

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