Có cách nào để phát hiện xem thuộc tính css "display" của một phần tử có bị thay đổi hay không (thành không hoặc khối hoặc khối nội tuyến ...)? nếu không, bất kỳ plugin nào? Cảm ơn
Câu trả lời:
Ghi chú
Sự kiện đột biến đã không được chấp nhận kể từ khi bài đăng này được viết và có thể không được hỗ trợ bởi tất cả các trình duyệt. Thay vào đó, hãy sử dụng máy quan sát đột biến .
Có bạn có thể. Mô-đun Sự kiện DOM L2 xác định các sự kiện đột biến ; một trong số đó - DOMAttrModified là cái bạn cần. Tuy nhiên, những điều này không được triển khai rộng rãi, nhưng được hỗ trợ trong ít nhất các trình duyệt Gecko và Opera.
Hãy thử điều gì đó dọc theo những dòng sau:
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
document.documentElement.style.display = 'block';Bạn cũng có thể thử sử dụng sự kiện "propertychange" của IE để thay thế DOMAttrModified. Nó sẽ cho phép phát hiện các stylethay đổi một cách đáng tin cậy.
classthuộc tính (hoặc bất kỳ thuộc tính nào khác nếu các bộ chọn thuộc tính có trong CSS) của tổ tiên của phần tử cũng có thể thay đổi phần tử, vì vậy bạn phải xử lý tất cả các DOMAttrModifiedsự kiện trên phần tử gốc tài liệu để hãy nắm bắt mọi thứ.
Bạn có thể sử dụng plugin jQuery attrchange . Chức năng chính của plugin là liên kết một hàm lắng nghe về sự thay đổi thuộc tính của các phần tử HTML.
Mẫu mã:
$("#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...
}
}
}
});Bạn có thể sử dụng csshàm của jQuery để kiểm tra các thuộc tính CSS, ví dụ: if ($('node').css('display') == 'block').
Colin nói đúng, rằng không có sự kiện rõ ràng nào được kích hoạt khi một thuộc tính CSS cụ thể bị thay đổi. Nhưng bạn có thể lật nó xung quanh và kích hoạt một sự kiện thiết lập màn hình và bất cứ điều gì khác.
Ngoài ra, hãy cân nhắc sử dụng thêm các lớp CSS để có được hành vi bạn muốn. Thông thường, bạn có thể thêm một lớp vào một phần tử chứa và sử dụng CSS để ảnh hưởng đến tất cả các phần tử. Tôi thường vỗ một lớp vào phần tử body để cho biết rằng phản hồi AJAX đang chờ xử lý. Sau đó, tôi có thể sử dụng bộ chọn CSS để có được màn hình mà tôi muốn.
Không chắc đây có phải là thứ bạn đang tìm kiếm hay không.
Đối với các thuộc tính mà quá trình chuyển đổi css sẽ ảnh hưởng, có thể sử dụng sự kiện chuyển tiếp, ví dụ cho 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>Bạn không thể. CSS không hỗ trợ "sự kiện". Tôi có dám hỏi bạn cần nó để làm gì không? Kiểm tra bài đăng này ở đây trên SO. Tôi không thể nghĩ ra lý do tại sao bạn lại muốn kết nối một sự kiện để thay đổi phong cách. Tôi giả sử ở đây rằng sự thay đổi kiểu được kích hoạt ở nơi khác bởi một đoạn javascript. Tại sao không thêm logic bổ sung vào đó?