Làm cách nào để xóa kiểu được thêm bằng hàm .css ()?

Tôi đang thay đổi CSS bằng jQuery và tôi muốn xóa kiểu dáng tôi đang thêm dựa trên giá trị đầu vào:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Tôi có thể làm cái này như thế nào?
Lưu ý rằng dòng trên chạy bất cứ khi nào một màu được chọn bằng cách sử dụng bộ chọn màu (nghĩa là khi chuột di chuyển qua một bánh xe màu).

Lưu ý thứ 2: Tôi không thể làm điều này với css("background-color", "none")vì nó sẽ xóa kiểu mặc định khỏi các tệp CSS .
Tôi chỉ muốn loại bỏ background-colorkiểu nội tuyến được thêm bởi jQuery .

Thay đổi thuộc tính thành một chuỗi trống xuất hiện để thực hiện công việc:

$.css("background-color", "");

Câu trả lời được chấp nhận hoạt động nhưng để lại một stylethuộc tính trống trên DOM trong các thử nghiệm của tôi. Không có vấn đề lớn, nhưng điều này loại bỏ tất cả:

removeAttr( 'style' );

Điều này giả định rằng bạn muốn loại bỏ tất cả các kiểu dáng động và quay trở lại kiểu dáng của biểu định kiểu.

Có một số cách để xóa thuộc tính CSS bằng jQuery:

1. Đặt thuộc tính CSS thành giá trị mặc định (ban đầu)

.css("background-color", "transparent")

Xem giá trị ban đầu cho thuộc tính CSS tại MDN . Ở đây giá trị mặc định là transparent. Bạn cũng có thể sử dụng inheritcho một số thuộc tính CSS để kế thừa thuộc tính từ cha của nó. Trong CSS3 / CSS4, bạn cũng có thể sử dụng initial, reverthoặc unsetnhưng các từ khóa này có thể hỗ trợ trình duyệt hạn chế.

2. Xóa thuộc tính CSS

Một chuỗi rỗng loại bỏ thuộc tính CSS, tức là

.css("background-color","")

Nhưng hãy cẩn thận, như được chỉ định trong tài liệu jQuery .css () , việc này sẽ loại bỏ thuộc tính nhưng nó có vấn đề tương thích với IE8 đối với các thuộc tính tốc ký CSS nhất định, bao gồm cả nền .

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ $ ('# mydiv'). Css ('color', '') - xóa thuộc tính đó khỏi một thành phần nếu nó đã được áp dụng trực tiếp, cho dù theo kiểu HTML thuộc tính, thông qua phương thức .css () của jQuery hoặc thông qua thao tác DOM trực tiếp của thuộc tính style. Tuy nhiên, nó không xóa một kiểu đã được áp dụng với quy tắc CSS trong biểu định kiểu hoặc phần tử. Cảnh báo: một ngoại lệ đáng chú ý là, đối với IE 8 trở xuống, việc xóa thuộc tính tốc ký như đường viền hoặc nền sẽ xóa hoàn toàn kiểu đó khỏi thành phần, bất kể được đặt trong biểu định kiểu hoặc thành phần .

3. Loại bỏ toàn bộ phong cách của phần tử

.removeAttr("style")

Tôi có cách xóa thuộc tính style bằng JavaScript thuần chỉ để cho bạn biết cách của JavaScript thuần

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

Điều này sẽ xóa thẻ hoàn chỉnh:

  $("body").removeAttr("style");

một trong hai hàm jQuery này sẽ hoạt động:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Chỉ cần sử dụng:

$('.tag-class').removeAttr('style');

hoặc là

$('#tag-id').removeAttr('style');

Làm thế nào về một cái gì đó như:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Sử dụng Plugin của tôi:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Đối với trường hợp của bạn, sử dụng nó như sau:

$(<mySelector>).removeCss();

hoặc là

$(<mySelector>).removeCss(false);

nếu bạn muốn loại bỏ CSS cũng được định nghĩa trong các lớp của nó:

$(<mySelector>).removeCss(true);

Thử cái này:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Cảm ơn

Nếu bạn sử dụng kiểu CSS, bạn có thể sử dụng:

$("#element").css("background-color","none"); 

và sau đó thay thế bằng:

$("#element").css("background-color", color);

Nếu bạn không sử dụng kiểu CSS và bạn có thuộc tính trong phần tử HTML, bạn có thể sử dụng:

$("#element").attr("style.background-color",color);

2018

có API gốc cho điều đó

element.style.removeProperty(propery)

Cái này cũng hoạt động !!

$elem.attr('style','');

Tại sao không tạo kiểu bạn muốn xóa lớp CSS? Bây giờ bạn có thể sử dụng : .removeClass(). Điều này cũng mở ra khả năng sử dụng:.toggleClass()

(loại bỏ lớp nếu nó hiện diện và thêm nó nếu không.)

Thêm / xóa một lớp cũng ít gây nhầm lẫn hơn khi thay đổi / khắc phục sự cố khi xử lý các vấn đề về bố cục (trái ngược với việc cố gắng tìm hiểu tại sao một kiểu cụ thể biến mất.)

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Điều này phức tạp hơn một số giải pháp khác, nhưng có thể mang lại sự linh hoạt hơn trong các tình huống:

1) Tạo một định nghĩa lớp để cô lập (đóng gói) kiểu dáng bạn muốn áp dụng / loại bỏ có chọn lọc. Nó có thể trống (và trong trường hợp này, có lẽ nên):

.myColor {}

2) sử dụng mã này, dựa trên http://jsfiddle.net/kdp5V/167/ từ câu trả lời này của gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Ví dụ sử dụng: http://jsfiddle.net/qvkwhtow/

Hãy cẩn thận:

• Không được thử nghiệm rộng rãi.
• Không thể bao gồm ! Các chỉ thị quan trọng hoặc khác trong giá trị mới. Bất kỳ chỉ thị hiện có như vậy sẽ bị mất thông qua thao tác này.
• Chỉ những thay đổi đầu tiên được tìm thấy của styleSelector. Không thêm hoặc xóa toàn bộ kiểu, nhưng điều này có thể được thực hiện với một cái gì đó phức tạp hơn.
• Bất kỳ giá trị không hợp lệ / không thể sử dụng sẽ bị bỏ qua hoặc ném lỗi.
• Trong Chrome (ít nhất), các quy tắc CSS không cục bộ (như trong nhiều trang web) không được hiển thị thông qua đối tượng document.styleSheets, vì vậy điều này sẽ không hoạt động trên chúng. Người ta sẽ phải thêm một phần ghi đè cục bộ và thao tác điều đó, ghi nhớ hành vi "tìm thấy đầu tiên" của mã này.
• document.styleSheets không đặc biệt thân thiện với thao tác nói chung, đừng mong đợi nó hoạt động để sử dụng tích cực.

Cô lập kiểu dáng theo cách này là tất cả những gì về CSS, ngay cả khi thao tác nó không phải là. Thao tác với các quy tắc CSS KHÔNG phải là tất cả những gì về jQuery, jQuery thao tác các phần tử DOM và sử dụng các bộ chọn CSS để thực hiện.

Đơn giản là rẻ trong phát triển web. Tôi khuyên bạn nên sử dụng chuỗi rỗng khi xóa một kiểu cụ thể

$(element).style.attr = '  ';

Thử cái này

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');