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

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



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

1942   13  

13 ответов:

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

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

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

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

360  
2017-10-18 17:29:01

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

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

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

150  
2014-11-19 01:43:19

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

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

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

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

20  
2013-01-16 18:07:56

вы можете установить стиль с помощью jQuery в css способ:

$('something:visible').css('display', 'none');
12  
2010-03-17 21:20:59

вы можете создать плагин 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
12  
2016-10-27 13:54:17

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

#myelement 
{
    display: none !important;
}

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

9  
2010-03-17 21:29:04 
$('div[style*=block]').removeAttr('style');
6  
2010-03-17 21:19:24 
$("[style*=block]").hide();
6  
2010-03-17 21:26:10

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

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

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

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

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

<input id="element" style="">
5  
2014-09-25 18:17:11

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

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

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

5  
2015-04-04 16:50:00

здесь inlinestyle selector filter я написал это подключается к jQuery.

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

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

$("div:inlineStyle(display:block)").hide();
3  
2012-07-27 22:12:28

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

2  
2010-03-17 21:39:07

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

etc...

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

1  
2014-12-09 13:43:30

Comments

    Ничего не найдено.
Click here to cancel reply.