ตรวจจับเหตุการณ์เมื่อคุณสมบัติ css เปลี่ยนโดยใช้ Jquery

มีวิธีตรวจสอบว่าคุณสมบัติ css "display" ขององค์ประกอบมีการเปลี่ยนแปลงหรือไม่ (ไม่ว่าจะไม่มีหรือบล็อกหรือบล็อกแบบอินไลน์ ... ) ถ้าไม่มีปลั๊กอินใด ๆ ขอบคุณ

บันทึก

เหตุการณ์การกลายพันธุ์ถูกเลิกใช้งานเนื่องจากโพสต์นี้ถูกเขียนและอาจไม่ได้รับการสนับสนุนจากเบราว์เซอร์ทั้งหมด ให้ใช้เครื่องสังเกตการกลายพันธุ์แทน

ใช่คุณสามารถ. 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 ปลั๊กอิน หน้าที่หลักของปลั๊กอินคือการผูกฟังก์ชั่น Listener กับการเปลี่ยนแปลงคุณสมบัติขององค์ประกอบ 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...
            }
        }
    }
});

คุณสามารถใช้cssฟังก์ชันของ jQuery เพื่อทดสอบคุณสมบัติ CSS เช่น if ($('node').css('display') == 'block').

Colin พูดถูกว่าไม่มีเหตุการณ์ที่ชัดเจนที่จะเริ่มทำงานเมื่อคุณสมบัติ CSS ที่เฉพาะเจาะจงมีการเปลี่ยนแปลง แต่คุณอาจพลิกไปมาและทริกเกอร์เหตุการณ์ที่ตั้งค่าการแสดงผลและอะไรก็ได้

ลองพิจารณาใช้การเพิ่มคลาส CSS เพื่อให้ได้พฤติกรรมที่คุณต้องการ บ่อยครั้งที่คุณสามารถเพิ่มคลาสให้กับองค์ประกอบที่มีและใช้ CSS เพื่อส่งผลต่อองค์ประกอบทั้งหมด ฉันมักจะตบชั้นเรียนลงบนองค์ประกอบของร่างกายเพื่อระบุว่าการตอบสนองของ AJAX กำลังรอดำเนินการ จากนั้นฉันสามารถใช้ตัวเลือก CSS เพื่อรับการแสดงผลที่ฉันต้องการ

ไม่แน่ใจว่านี่คือสิ่งที่คุณกำลังมองหาหรือไม่

สำหรับคุณสมบัติที่การเปลี่ยนแปลง css จะส่งผลต่อสามารถใช้เหตุการณ์การเปลี่ยนแปลงเช่นสำหรับดัชนี z:

$(".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 ฉันนึกเหตุผลไม่ออกว่าทำไมคุณถึงต้องการเชื่อมโยงเหตุการณ์เข้ากับการเปลี่ยนแปลงรูปแบบ ฉันสมมติว่าที่นี่การเปลี่ยนแปลงรูปแบบถูกเรียกใช้ในที่อื่นด้วยจาวาสคริปต์ ทำไมไม่เพิ่มตรรกะพิเศษที่นั่น?