Як я можу видалити стиль, доданий за допомогою функції .css ()?

Я змінюю CSS з jQuery і хочу видалити стилі, які я додаю, виходячи з вхідного значення:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Як я можу це зробити?
Зауважте, що рядок вище працює, коли колір вибирається за допомогою вибору кольору (наприклад, коли миша рухається по кольоровому колесо).

2-я примітка: я не можу цього зробити, css("background-color", "none")оскільки це видалить стилі за замовчуванням з файлів CSS .
Я просто хочу видалити background-colorстиль вбудовування, який додав jQuery .

Зміна властивості на порожній рядок, схоже, виконує завдання:

$.css("background-color", "");

Прийнята відповідь працює, але залишає порожній styleатрибут DOM у моїх тестах. Нічого страшного, але це все видаляє:

removeAttr( 'style' );

Це передбачає, що ви хочете видалити всі динамічні стилі та повернутися до стилів таблиці стилів.

Існує кілька способів видалити властивість CSS за допомогою jQuery:

1. Встановлення властивості CSS за замовчуванням (початковим) значенням

.css("background-color", "transparent")

Перегляньте початкове значення властивості CSS в MDN . Тут значення за замовчуванням transparent. Ви також можете використовувати inheritдля декількох властивостей CSS для успадкування атрибута від його батьківського. В CSS3 / CSS4, ви можете також використовувати initial, revertабо , unsetале ці ключові слова можуть мати обмежену підтримку браузера.

2. Видалення властивості CSS

Порожній рядок видаляє властивість CSS, тобто

.css("background-color","")

Але будьте обережні, як зазначено в документації jQuery .css () , це видаляє властивість, але у нього є проблеми сумісності з IE8 для певних властивостей скорочення CSS, включаючи фон .

Встановлення значення властивості стилю в порожній рядок - наприклад, $ ('# mydiv'). Css ('color', '') - видаляє це властивість з елемента, якщо воно вже було безпосередньо застосовано, будь то в стилі HTML атрибут, через метод .Qss () jQuery's, або через пряме DOM-маніпулювання властивістю стилю. Однак це не видаляє стиль, застосований із правилом CSS у таблиці стилів або елементі. Попередження: один помітний виняток полягає в тому, що для IE 8 і нижче видалення властивості скорочення, наприклад, межі або фону, видалить цей стиль повністю з елемента, незалежно від того, що встановлено у таблиці стилів чи елементів .

3. Видалення всього стилю елемента

.removeAttr("style")

У мене з’явився спосіб видалити атрибут стилю за допомогою чистого JavaScript, щоб повідомити про спосіб чистого JavaScript

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

Це видалить повний тег:

  $("body").removeAttr("style");

будь-яка з цих функцій jQuery повинна працювати:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Просто за допомогою:

$('.tag-class').removeAttr('style');

або

$('#tag-id').removeAttr('style');

Як щодо чогось такого:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Використовувати мій плагін:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Для вашого випадку використовуйте його наступним чином:

$(<mySelector>).removeCss();

або

$(<mySelector>).removeCss(false);

якщо ви хочете видалити також CSS, визначений у його класах:

$(<mySelector>).removeCss(true);

Спробуйте це:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Дякую

Якщо ви використовуєте стиль CSS, ви можете використовувати:

$("#element").css("background-color","none"); 

а потім замінити на:

$("#element").css("background-color", color);

Якщо ви не використовуєте стиль CSS і у вас є атрибут у елементі HTML, ви можете використовувати:

$("#element").attr("style.background-color",color);

2018 рік

для цього є рідний API

element.style.removeProperty(propery)

Цей теж працює !!

$elem.attr('style','');

Чому б не зробити стиль, який ви хочете видалити клас CSS? Тепер ви можете використовувати: .removeClass(). Це також відкриває можливість використання:.toggleClass()

(видаліть клас, якщо він присутній, і додайте його, якщо його немає.)

Додавання / видалення класу також менш заплутане для зміни / усунення несправностей при вирішенні проблем з компонуванням (на відміну від спроб з'ясувати, чому певний стиль зник.)

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Це складніше, ніж деякі інші рішення, але може запропонувати більшу гнучкість у сценаріях:

1) Складіть визначення класу, щоб виділити (інкапсулювати) стилі, які ви хочете вибірково застосувати / видалити. Він може бути порожнім (а в цьому випадку, мабуть, має бути):

.myColor {}

2) використовувати цей код на основі http://jsfiddle.net/kdp5V/167/ з цієї відповіді від gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Приклад використання: http://jsfiddle.net/qvkwhtow/

Застереження:

• Не перевірений широко.
• Не можна включати важливі чи інші директиви в нове значення. Будь-які такі існуючі директиви будуть втрачені завдяки цій маніпуляції.
• Лише зміни вперше знайшли виникнення стилюSelector. Не додає та не видаляє цілі стилі, але це можна зробити за допомогою щось більш досконалого.
• Будь-які недійсні / непридатні значення будуть проігноровані або помилка кидання.
• У Chrome (принаймні), не локальні (як на крос-сайті) правила CSS не піддаються впливу об'єкта document.styleSheets, тому це не працюватиме на них. Потрібно було б додати локальне скасування та маніпулювати цим, маючи на увазі поведінку цього коду «вперше знайденого».
• document.styleSheets не особливо прихильний до маніпуляцій загалом, не сподівайтеся, що це буде працювати для агресивного використання.

Виділення стилю таким чином - це те, що стосується CSS, навіть якщо маніпулювання ним не є. Маніпулювання правилами CSS НЕ є тим, що стосується jQuery, jQuery маніпулює елементами DOM та використовує для цього вибіркові CSS.

У веб-розробці просто дешево. Я рекомендую використовувати порожній рядок під час видалення певного стилю

$(element).style.attr = '  ';

Спробуйте це

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');