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

Плагин jQuery применяет встроенный стиль ( display:block). Я чувствую себя ленивым и хочу переопределить это display:none.

Какой самый лучший (ленивый) способ?

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

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

$('#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, с помощью .css()метода jQuery или с помощью прямого DOM-манипулирования свойством стиля. Однако он не удаляет стиль, который был применен с помощью правила CSS в таблице стилей или <style>элементе.

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

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

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

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

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

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

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

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

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

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

Вы можете создать плагин 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

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

#myelement 
{
    display: none !important;
}

Отказ от ответственности: я не защищаю этот подход, но это, безусловно, ленивый путь.

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

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

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

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

ОБНОВЛЕНИЕ:
я сделал интерактивную скрипку, чтобы поиграть с различными методами и их результатами. По- видимому, не существует большая разница между set to empty string, set to faux valueи removeProperty(). Все они приводят к одному и тому же отступлению, которое является либо заранее заданным правилом CSS, либо значением браузера по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

и т.д...

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

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

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

У меня была похожая проблема со свойством width. Я не смог удалить! Важное из кода, и так как он нуждался в этом стиле в новом шаблоне, я добавил Id (modalstyling) к элементу, а затем добавил следующий код в шаблон:

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