Чи можна видалити вбудовані стилі за допомогою 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, методом jQuery .css()або шляхом прямого 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' : '' });

тощо ...

Просто залиште 2-й парам порожнім!

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

Спочатку я намагався видалити стиль вбудованого в css, але це не працює і новий стиль, як-от дисплей: жоден не буде перезаписаний. Але в JQuery це працює так.

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

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