Можно ли удалить встроенные стили с помощью jQuery?

Ответ 1

Обновление: пока работает следующее решение, существует гораздо более простой способ. Увидеть ниже.

Вот то, что я придумал, и я надеюсь, что это пригодится - вам или кому-либо еще:

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

Это удалит этот встроенный стиль.

Я не уверен, что это то, что вы хотели. Вы хотели переопределить его, что, как уже отмечалось, легко сделать с помощью $('#element').css('display', 'inline').

То, что я искал, было решением УДАЛИТЬ встроенный стиль полностью. Мне нужно это для плагина, который я пишу, где я должен временно установить некоторые встроенные значения CSS, но позже хочу удалить их; Я хочу, чтобы таблица стилей вернула себе контроль. Я мог бы сделать это, сохранив все его первоначальные значения и затем вернув их обратно в строку, но это решение кажется мне намного чище.

Вот это в формате плагина:

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

Если вы включите этот плагин на страницу перед вашим скриптом, вы можете просто позвонить

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

и это должно сработать.

Обновление: теперь я понял, что все это бесполезно. Вы можете просто установить его пустым:

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

и он будет автоматически удален для вас.

Вот цитата из документов:

Установка значения свойства стиля в пустую строку - например, $('#mydiv').css('color', '') - удаляет это свойство из элемента, если оно уже было применено напрямую, будь то в стиле HTML атрибут, через метод jQuery .css(), или через прямое DOM-манипулирование свойством style. Однако он не удаляет стиль, который был применен с помощью правила CSS в таблице стилей или в элементе <style>.

Я не думаю, что jQuery делает что-то магическое здесь; кажется, объект style делает это изначально.

Ответ 2

.removeAttr("style"), чтобы просто избавиться от всего тега стиля...

.attr("style"), чтобы проверить значение и посмотреть, существует ли встроенный стиль...

.attr("style",newValue), чтобы установить его на что-то еще

Ответ 3

Самый простой способ удалить встроенные стили (сгенерированные jQuery):

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

Встроенный код должен исчезнуть, и ваш объект должен адаптировать стиль, предопределенный в ваших файлах CSS.

Работал для меня!

Ответ 4

Вы можете установить стиль, используя метод jQuery css:

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

Ответ 5

вы можете создать плагин jquery следующим образом:

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

Использование

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

Ответ 6

Ленивый способ (который заставит будущих дизайнеров проклинать ваше имя и убить вас во сне):

#myelement 
{
    display: none !important;
}

Отказ от ответственности: Я не сторонник такого подхода, но это, безусловно, ленивый способ.

Ответ 7

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

Ответ 8

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

Ответ 9

Если вы хотите удалить свойство в атрибуте стиля, а не просто установить его на что-то еще, вы можете использовать removeProperty() метод:

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

UPDATE:
Я сделал интерактивный fiddle, чтобы поиграть с различными методами и их результатами. По-видимому, разница между set to empty string, set to faux value и removeProperty() невелика. Все они приводят к такому же откату - это либо заданное правило CSS, либо значение по умолчанию для браузера.

Ответ 10

Если дисплей является единственным параметром вашего стиля, вы можете запустить эту команду, чтобы удалить весь стиль:

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

Означает, что если ваш элемент выглядел так:

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

Теперь ваш элемент будет выглядеть так:

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

Ответ 11

Вот фильтр inlineStyle, который я написал, который подключается к jQuery.

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

В вашем случае вы можете использовать это как:

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

Ответ 12

Измените плагин, чтобы больше не применять стиль. Это было бы намного лучше, чем удаление стиля после этого.

Ответ 13

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

и т.д...

Просто оставьте второй параметр пустым!

Ответ 14

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

Сначала я попытался удалить встроенный стиль в css, но он не работает и новый стиль, такой как display: ни один не будет перезаписан. Но в JQuery это работает так.