Hướng dẫn how can we make css property important in jquery? - làm thế nào chúng ta có thể làm cho thuộc tính css trở nên quan trọng trong jquery?

Tôi nghĩ rằng tôi đã tìm thấy một giải pháp. Tôi đã biến nó thành một chức năng mới:

jQuery.style(name, value, priority);

Bạn có thể sử dụng nó để nhận các giá trị với .style('name') giống như null red blue important 0, nhận null red blue important 1 với null red blue important 2 và cũng đặt các giá trị, với khả năng chỉ định mức độ ưu tiên là 'quan trọng'. Xem điều này.

Thí dụ

var div = $('someDiv'); console.log(div.style('color')); div.style('color', 'red'); console.log(div.style('color')); div.style('color', 'blue', 'important'); console.log(div.style('color')); console.log(div.style().getPropertyPriority('color'));

Ví dụ đầu ra:

null red blue important

Chức năng

(function($) { if ($.fn.style) { return; } // Escape regex chars with \ var escape = function(text) { return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }; // For those who need them (< IE 9), add support for CSS functions var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue; if (!isStyleFuncSupported) { CSSStyleDeclaration.prototype.getPropertyValue = function(a) { return this.getAttribute(a); }; CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) { this.setAttribute(styleName, value); var priority = typeof priority != 'undefined' ? priority : ''; if (priority != '') { // Add priority manually var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) + '(\\s*;)?', 'gmi'); this.cssText = this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';'); } }; CSSStyleDeclaration.prototype.removeProperty = function(a) { return this.removeAttribute(a); }; CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) { var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?', 'gmi'); return rule.test(this.cssText) ? 'important' : ''; } } // The style function $.fn.style = function(styleName, value, priority) { // DOM node var node = this.get(0); // Ensure we have a DOM node if (typeof node == 'undefined') { return this; } // CSSStyleDeclaration var style = this.get(0).style; // Getter/Setter if (typeof styleName != 'undefined') { if (typeof value != 'undefined') { // Set style property priority = typeof priority != 'undefined' ? priority : ''; style.setProperty(styleName, value, priority); return this; } else { // Get style property return style.getPropertyValue(styleName); } } else { // Get CSSStyleDeclaration return style; } }; })(jQuery);

Xem điều này để biết các ví dụ về cách đọc và đặt các giá trị CSS. Vấn đề của tôi là tôi đã đặt null red blue important 3 cho chiều rộng trong CSS của mình để tránh xung đột với các CSS chủ đề khác, nhưng bất kỳ thay đổi nào tôi đã thực hiện với chiều rộng trong jQuery sẽ không bị ảnh hưởng vì chúng sẽ được thêm vào thuộc tính kiểu.

Khả năng tương thích

Để thiết lập với mức độ ưu tiên bằng cách sử dụng hàm null red blue important 4, bài viết này cho biết có sự hỗ trợ cho IE 9+ và tất cả các trình duyệt khác. Tôi đã thử với IE 8 và nó đã thất bại, đó là lý do tại sao tôi đã xây dựng hỗ trợ cho nó trong các chức năng của mình (xem ở trên). Nó sẽ hoạt động trên tất cả các trình duyệt khác bằng cách sử dụng null red blue important 4, nhưng nó sẽ cần mã tùy chỉnh của tôi để hoạt động trong