요소의 “표시”css 속성이 변경되었는지 감지하는 방법이 있습니까 (없음 또는 차단 또는 인라인 차단 …)? 그렇지 않은 경우 플러그인이 있습니까? 감사
답변
노트
이 게시물이 작성된 이후 돌연변이 이벤트 는 더 이상 사용되지 않으며 모든 브라우저에서 지원되지 않을 수 있습니다. 대신 돌연변이 관찰자를 사용하십시오 .
그래 넌 할수있어. DOM L2 이벤트 모듈은 돌연변이 이벤트를 정의 합니다 . 그중 하나 -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는 “이벤트”를 지원하지 않습니다. 그게 뭔지 물어봐도 될까요? 여기 에서이 게시물을 확인하십시오 . 이벤트를 스타일 변경에 연결하려는 이유를 생각할 수 없습니다. 나는 여기서 스타일 변경이 자바 스크립트의 일부에 의해 다른 곳에서 트리거되었다고 가정하고 있습니다. 추가 논리를 추가하지 않는 이유는 무엇입니까?
답변
