Tôi có thể sử dụng jquery để loại bỏ/loại bỏ css!

Question

Nếu có quy tắc CSS sử dụng !important, có cách nào để loại bỏ quy tắc !important để tôi có thể thực hiện các thay đổi về phong cách tiếp theo với JS hoặc jQuery không?

theirs.css

div.stubborn { display: none !important; } 

mine.js

$('.stubborn').fadeIn(); // won't work because of !important flag 

Thật không may, tôi không có kiểm soát đối với phong cách áp dụng các quy tắc !important vì vậy tôi cần một công việc xung quanh.

Answer 1

Thật không may, bạn không thể ghi đè !important mà không sử dụng !important như inline/phong cách nội bộ bên dưới bao gồm theirs.css.

Bạn có thể xác định kiểu !important và thêm nó vào .stubborn rồi điều chỉnh độ mờ đục ..Xem dưới đây,

CSS:

div.hidden_block_el { 
    display: block !important; 
    opacity: 0; 
} 

JS:

$('.stubborn') 
    .addClass('hidden_block_el') 
    .animate({opacity: 1}); 

DEMO:http://jsfiddle.net/jjWJT/1/

cách tiếp cận thay thế (inline),

$('.stubborn') 
    .attr('style', 'display: block !important; opacity: 0;') 
    .animate({opacity: 1}); 

DEMO:http://jsfiddle.net/jjWJT/

Answer 2

bạn có thể thêm một phong cách css mới với quan trọng được thêm vào nó sẽ ghi đè kiểu gốc

Đây là từ câu trả lời khác trong javascript:

function addNewStyle(newStyle) { 
var styleElement = document.getElementById('styles_js'); 
if (!styleElement) { 
    styleElement = document.createElement('style'); 
    styleElement.type = 'text/css'; 
    styleElement.id = 'styles_js'; 
    document.getElementsByTagName('head')[0].appendChild(styleElement); 
} 
styleElement.appendChild(document.createTextNode(newStyle)); 
} 

addNewStyle('td.EvenRow a {display:inline !important;}') 

câu trả lời này là here

Ngoài ra tôi tin rằng bạn có thể thêm kiểu dáng như thế này

 .css({ 'display' : 'block !important' }); 

trong jQuery

Answer 3

Bạn cần phải tạo một lớp mới để áp dụng mờ dần.

CSS:

div.stubborn { display: none !important; } 
div.stubborn.fade-ready { display: block !important; opacity: 0; } 

JS:

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show 
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide 

DEMO HERE

Answer 4

Chỉ cần thêm một thẻ style="" cho bất kỳ hình ảnh với vấn đề này, hy vọng tất cả họ đều có một số loại định lớp với họ rằng thật dễ dàng để làm như vậy.

$('div.stubborn').attr('style', 'display: inline !important;');​ 

jsFiddle DEMO

Answer 5

Tôi đã thử một số phương pháp, nhưng kết quả tốt nhất mà tôi đã thu được bằng cách thêm phong cách CSS trong một lớp học riêng biệt, sau đó loại bỏ với jQuery (quan trọng!):

CSS :

.important-css-here { display: block !important;} 

Trong jQuery:

$("#selector").addClass("important-css-here"); 

.210

sau đó, khi tôi cần:

$("#selector").removeClass("important-css-here"); 

làm việc như một nét duyên dáng ;-)