Czy można usunąć style wbudowane za pomocą jQuery?

Wtyczka jQuery stosuje styl wbudowany ( display:block). Czuję się leniwy i chcę to zastąpić display:none.

Jaki jest najlepszy (leniwy) sposób?

Aktualizacja: podczas gdy poniższe rozwiązanie działa, istnieje o wiele łatwiejsza metoda. Patrz poniżej.

Oto, co wymyśliłem i mam nadzieję, że to się przyda - Tobie lub komukolwiek innemu:

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

Spowoduje to usunięcie tego wbudowanego stylu.

Nie jestem pewien, czy tego właśnie chciałeś. Chciałeś to zmienić, co, jak już wspomniano, jest łatwe do zrobienia $('#element').css('display', 'inline').

To, czego szukałem, to rozwiązanie, aby całkowicie usunąć styl wbudowany. Potrzebuję tego do wtyczki, którą piszę, w której muszę tymczasowo ustawić niektóre wbudowane wartości CSS, ale chcę je później usunąć; Chcę, aby arkusz stylów przejął kontrolę. Mógłbym to zrobić, przechowując wszystkie oryginalne wartości, a następnie przywracając je do pierwotnego stanu, ale to rozwiązanie wydaje mi się znacznie czystsze.

Oto format wtyczki:

(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));

Jeśli umieścisz tę wtyczkę na stronie przed skryptem, możesz po prostu zadzwonić

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

i to powinno załatwić sprawę.

Aktualizacja : Teraz zdałem sobie sprawę, że to wszystko jest daremne. Możesz po prostu ustawić puste:

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

i zostanie automatycznie dla Ciebie usunięty.

Oto cytat z dokumentów :

Ustawienie wartości właściwości stylu na pusty ciąg - np. $('#mydiv').css('color', '')- usuwa tę właściwość z elementu, jeśli została już bezpośrednio zastosowana, czy to w atrybucie stylu HTML, poprzez .css()metodę jQuery , czy poprzez bezpośrednią manipulację DOM właściwości stylu. Nie usuwa jednak stylu, który został zastosowany z regułą CSS w arkuszu stylów lub <style>elemencie.

Nie sądzę, że jQuery robi tutaj magię; wydaje się, że styleobiekt robi to natywnie .

.removeAttr("style") aby pozbyć się całego tagu stylu ...

.attr("style") aby przetestować wartość i sprawdzić, czy istnieje styl wbudowany ...

.attr("style",newValue) ustawić to na coś innego

Najprostszym sposobem na usunięcie stylów wbudowanych (wygenerowanych przez jQuery) jest:

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

Kod wewnętrzny powinien zniknąć, a obiekt powinien dostosować styl predefiniowany w plikach CSS.

Pracował dla mnie!

Możesz ustawić styl za pomocą cssmetody jQuery :

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

możesz utworzyć wtyczkę jquery w ten sposób:

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]);
        });
    };
})();

stosowanie

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

Leniwy sposób (który spowoduje, że przyszli projektanci przeklną twoje imię i zamordują cię we śnie):

#myelement 
{
    display: none !important;
}

Uwaga: Nie popieram tego podejścia, ale z pewnością jest to leniwy sposób.

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

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

Jeśli chcesz usunąć właściwość z atrybutu stylu - a nie tylko ustawić ją na coś innego - skorzystaj z removeProperty()metody:

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

AKTUALIZACJA:
Zrobiłem interaktywne skrzypce, aby bawić się różnymi metodami i ich wynikami. Najwyraźniej nie ma dużej różnicy między set to empty string, set to faux valuea removeProperty(). Wszystkie powodują tę samą awarię - która jest albo wstępnie określoną regułą CSS, albo wartością domyślną przeglądarki.

Jeśli wyświetlanie jest jedynym parametrem Twojego stylu, możesz uruchomić to polecenie, aby usunąć cały styl:

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

Oznacza to, że jeśli Twój element wyglądał wcześniej tak:

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

Teraz twój element będzie wyglądał następująco:

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

Oto filtr wyboru inlineStyle, który napisałem, który podłącza się do jQuery.

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

W twoim przypadku możesz użyć tego w następujący sposób:

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

Zmień wtyczkę, aby nie stosować stylu. Byłoby to znacznie lepsze niż późniejsze usunięcie stylu.

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

itp...

Po prostu zostaw drugi parametr pusty!

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

Na początku próbowałem usunąć styl wbudowany w css, ale to nie działa i nowy styl, taki jak display: żaden nie zostanie nadpisany. Ale w JQuery działa to tak.

Miałem podobny problem z właściwością width. Nie mogłem usunąć! Ważne z kodu, a ponieważ potrzebowałem tego stylu na nowym szablonie, dodałem do elementu Id (modalstyling), a następnie dodałem następujący kod do szablonu:

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