2012-05-20 52 views
9

Sử dụng plugin gọi .jsp sử dụng biểu định kiểu của riêng nó được lưu trữ bên ngoài (đó là nhúng yelp - cố gắng điều khiển giao diện). Một yếu tố Tôi đang cố gắng để thay đổi có! Tag quan trọng trên nó, và tôi dường như không thể thay đổi nó ...thay đổi màu nền của div bằng jquery có thẻ quan trọng

tôi đã cố gắng

<script type="text/javascript"> 
    $('.elementToChange').css({'background-color':'black'});​ 
</script> 

vô ích. Ý tưởng?

+1

Hiển thị phần đó của HTML. – NAVEED

+0

Nếu '! Quan trọng' đã được khai báo trong biểu định kiểu bên ngoài, cài đặt sẽ ghi đè bất kỳ cài đặt nào khác, bất kể thứ tự cụ thể thông thường, trừ khi kiểu sau (cụ thể hơn) * cũng * khai báo'! Quan trọng'. Ngẫu nhiên, câu hỏi này có thể liên quan đến bạn: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles –

+0

http://stackoverflow.com/questions/462537/overriding-important-style- sử dụng-javascript – Faust

Trả lời

27

Dường như trong các phiên bản hơn để cập nhật lên của jQuery (ít nhất là 1,7 .2 và cao hơn), bạn có thể chỉ cần đặt css:

$('#elementToChange').css('background-color', 'blue'); 

Xem http://jsfiddle.net/HmXXc/185/

Trong các phiên bản cũ của jQuery và Zepto bạn phải xóa css đầu tiên:

// Clear the !important css 
$('#elementToChange').css('background-color', ''); 

Và sau đó thiết lập lại nó bằng cách sử:

$('#elementToChange').css('background-color', 'blue'); 

Hoặc trong một lớp lót:

$('#elementToChange') 
    .css('background-color', '') 
    .css('background-color', 'blue'); 

Xem http://jsfiddle.net/HmXXc/186/.

Original câu trả lời:

Lưu ý: đây có thể là một ý tưởng tồi, vì nó sẽ loại bỏ bất kỳ phong cách nội tuyến khác

tôi sẽ chỉnh sửa các thuộc tính style trực tiếp

$('.elementToChange').attr('style', 'background-color: blue !important'); 

http://jsfiddle.net/RichardTowers/3wemT/1/

+0

Mặc dù điều này sẽ tách bất kỳ kiểu nào đã được gắn với phần tử, đó có thể là tin xấu. Tôi nghĩ rằng việc thêm một lớp học là an toàn hơn. – RichardTowers

+0

Điều này làm việc - mặc dù @RichardTowers đã đúng. Nó đã quét sạch mọi thứ (không phải là một vấn đề, có thể tái tạo). Cảm ơn! – elzi

4

Đây là giải pháp của bạn:

http://jsfiddle.net/irpm/bdhpp/2/

Ý tưởng là để thêm các lớp:

$('.elementToChange').addClass('blackBg'); 
+0

gần như đã hoạt động ... đây là ảnh chụp màn hình: http://d.pr/i/qxPl trên cùng là biểu định kiểu bên ngoài. background: màu xanh là thứ tôi thêm vào với jquery. dưới đây là một cái gì đó trong css của tôi mà làm việc kể từ khi nó css bên ngoài đã không có một thẻ quan trọng về điều đó. lời khuyên? – elzi

+0

cố gắng tải style.css sau ybadge.css trong html của bạn. Bạn có thể làm điều đó? –

0

Bạn có thể sử dụng follo chức năng cánh:

function replaceBGColorImportant(element,newColor){ 
    var styles = element.getAttribute('style'); 
    styles = styles?styles.split(';'):[]; 
    var newStyles = []; 
    styles.map(function(x){ 
     if (x.split(':')[0] != "background-color") 
      newStyles.push(x); 
    }); 
    newStyles.push('background-color:#'+newColor+' !important'); 
    element.setAttribute('style',newStyles.join(';')); 
} 

Execute như sau:

replaceBGColorImportant(document.body,'#009922'); 
0

Qua biểu thức chính quy: https://jsfiddle.net/7jj7gq3y/2/

HTML:

<div class="elementToChange" style=" background-color: yellow !important; width: 100px; height: 100px;"></div> 

JavaScript:

var setImportantStyle = function(element, attributeName, value) { 
    var style = element.attr('style'); 
    if (style === undefined) return; 
    var re = new RegExp(attributeName + ": .* !important;", "g"); 
    style = style.replace(re, ""); 
    element.css('cssText', attributeName + ': ' + value + ' !important;' + style); 
} 
setImportantStyle($('.elementToChange'), 'background-color', 'red'); 
1

Bạn có thể thao tác!css quan trọng bằng cách sử dụng các bước sau, hoặc bạn có thể sử dụng inline-css hoặc Internal css hoặc bạn có thể tải css bên ngoài của riêng bạn sau thứ tự của css được tải trước đó, nó sẽ giúp bạn ghi đè css đó bằng tùy chỉnh của bạn.

<html> 
    <head> 
    <!-- 
    //First Solution 
    //PreloaderCSS 
    //YourCustomCSS 

    //Second Solution 
    Internal CSS --> 
    </head> 
    <body> 
<!-- 
Third solution 
//Inline CSS 
-> 
    </body> 
    </html> 
Các vấn đề liên quan