Có thể loại bỏ các kiểu nội tuyến với jQuery không?

Một plugin jQuery đang áp dụng một kiểu nội tuyến ( display:block). Tôi cảm thấy lười biếng và muốn ghi đè lên nó display:none.

Cách tốt nhất (lười biếng) là gì?

Cập nhật: trong khi giải pháp sau hoạt động, có một phương pháp dễ dàng hơn nhiều. Xem bên dưới.

Đây là những gì tôi nghĩ ra và tôi hy vọng điều này có ích - cho bạn hoặc bất kỳ ai khác:

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

Điều này sẽ loại bỏ phong cách nội tuyến đó.

Tôi không chắc đây là thứ bạn muốn. Bạn muốn ghi đè lên nó, như đã chỉ ra, dễ dàng thực hiện $('#element').css('display', 'inline').

Những gì tôi đang tìm kiếm là một giải pháp để loại bỏ hoàn toàn phong cách nội tuyến. Tôi cần cái này cho một plugin tôi đang viết trong đó tôi phải tạm thời đặt một số giá trị CSS nội tuyến, nhưng sau đó muốn xóa chúng; Tôi muốn bản định kiểu lấy lại quyền kiểm soát. Tôi có thể làm điều đó bằng cách lưu trữ tất cả các giá trị ban đầu của nó và sau đó đưa chúng trở lại nội tuyến, nhưng giải pháp này cho tôi cảm thấy sạch sẽ hơn nhiều.

Đây là định dạng plugin:

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style && style.replace(search, '');
            });
        });
    };
}(jQuery));

Nếu bạn bao gồm plugin này trong trang trước tập lệnh của mình, thì bạn có thể chỉ cần gọi

$('#element').removeStyle('display');

và điều đó nên làm các mẹo.

Cập nhật : Bây giờ tôi nhận ra rằng tất cả điều này là vô ích. Bạn chỉ có thể đặt nó thành trống:

$('#element').css('display', '');

và nó sẽ tự động được gỡ bỏ cho bạn.

Đây là một trích dẫn từ các tài liệu :

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ: $('#mydiv').css('color', '')loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua .css()phương thức của jQuery hoặc thông qua thao tác DOM trực tiếp của thuộc tính kiểu. 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 <style>phần tử.

Tôi không nghĩ jQuery đang làm bất kỳ phép thuật nào ở đây; có vẻ như các styleđối tượng thực hiện điều này natively .

.removeAttr("style") để loại bỏ toàn bộ thẻ kiểu ...

.attr("style") để kiểm tra giá trị và xem nếu một kiểu nội tuyến tồn tại ...

.attr("style",newValue) để đặt nó vào một cái gì đó khác

Cách dễ nhất để loại bỏ các kiểu nội tuyến (được tạo bởi jQuery) sẽ là:

$(this).attr("style", "");

Mã nội tuyến sẽ biến mất và đối tượng của bạn sẽ điều chỉnh kiểu được xác định trước trong các tệp CSS của bạn.

Đã làm cho tôi!

Bạn có thể đặt kiểu bằng cssphương thức của jQuery :

$('something:visible').css('display', 'none');

bạn có thể tạo một plugin jquery như thế này:

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

sử dụng

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

Cách Lười biếng (sẽ khiến các nhà thiết kế trong tương lai nguyền rủa tên bạn và giết bạn trong giấc ngủ):

#myelement 
{
    display: none !important;
}

Tuyên bố miễn trừ trách nhiệm: Tôi không ủng hộ cách tiếp cận này, nhưng chắc chắn đó là cách lười biếng.

$('div[style*=block]').removeAttr('style');

$("[style*=block]").hide();

Nếu bạn muốn xóa một thuộc tính trong thuộc tính style - không chỉ đặt nó thành một thứ khác - bạn sử dụng removeProperty()phương thức:

document.getElementById('element').style.removeProperty('display');

CẬP NHẬT:
Tôi đã thực hiện một câu đố tương tác để chơi xung quanh với các phương pháp khác nhau và kết quả của chúng. Rõ ràng, không có nhiều sự khác biệt giữa set to empty string, set to faux valuevà removeProperty(). Tất cả đều dẫn đến cùng một dự phòng - đó là quy tắc CSS được đặt trước hoặc giá trị mặc định của trình duyệt.

Trong trường hợp màn hình là tham số duy nhất từ ​​kiểu của bạn, bạn có thể chạy lệnh này để xóa tất cả kiểu:

$('#element').attr('style','');

Có nghĩa là nếu yếu tố của bạn trông như thế này trước đây:

<input id="element" style="display: block;">

Bây giờ yếu tố của bạn sẽ trông như thế này:

<input id="element" style="">

Đây là một bộ lọc chọn lọc inlineStyle mà tôi đã viết mà cắm vào jQuery.

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

Trong trường hợp của bạn, bạn có thể sử dụng như thế này:

$("div:inlineStyle(display:block)").hide();

Thay đổi plugin để không còn áp dụng phong cách. Điều đó sẽ tốt hơn nhiều so với việc loại bỏ phong cách sau đó.

$el.css({ height : '', 'margin-top' : '' });

Vân vân...

Chỉ cần để trống param thứ 2!

$("#element").css({ display: "none" });

Lúc đầu, tôi đã cố gắng loại bỏ kiểu nội tuyến trong css, nhưng nó không hoạt động và kiểu mới như hiển thị: không cái nào sẽ bị ghi đè. Nhưng trong JQuery, nó hoạt động như thế này.

Tôi đã có vấn đề tương tự với tài sản chiều rộng. Tôi không thể xóa! Quan trọng khỏi mã và vì nó cần kiểu này trên một mẫu mới, tôi đã thêm Id (modalstomme) vào phần tử và sau đó tôi đã thêm mã sau vào mẫu:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>