Как удалить атрибут CSS из таблицы стилей с помощью JQuery?

Question

Я пытаюсь выяснить, как удалить атрибуты css с помощью JQuery. Проблема в том, что кажется, что это можно сделать, только если стиль встроен. Например, когда я использую этот подход:

('.hero').css('background-image', '').css('background-color', ''); 

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

('.hero').css('background-image', 'none').css('background-color', 'transparent'); 

Может ли кто-нибудь помочь мне в удалении атрибутов, которые добавляются через таблицу стилей, а не в строку?

Answer 1

Вы должны установить стиль по умолчанию для элементов. Few default CSS properties from W3C. Большинство свойств по умолчанию: listed here.

Answer 2

Вы можете сделать это, но это очень запутанно. Единственный способ добиться этого - загрузить таблицу стилей в строку в javascript, grep из правил, которые вы хотите удалить (используя String.replace() или аналогичные), а затем удалить текущий тег css со страницы (используя $ .remove()), а затем добавление нового тега css со скопированным содержимым загруженного файла/текста.

Это очень запутанный. Я думаю, вам нужно переосмыслить, почему вы пытаетесь это сделать для начала. Или, может быть, просто придерживайтесь значений, возвращаемых значениями по умолчанию, используя jQuery, который можно найти on w3schools. Или, может быть, создайте стиль в таблице стилей, который устанавливает значения по умолчанию и присваивает стилю этот стиль. ИЛИ просто дайте нам немного больше информации, и мы сможем предложить лучший способ решения вашей проблемы.

Answer 3

Я думаю, вы можете задать неправильный вопрос.

Похоже, вы хотите иметь возможность переделать элемент без удаления существующего класса. Более простой способ сделать это - добавить дополнительный класс к элементу, который вы хотите по-разному, а затем обработать его в определении CSS.

Например:

('.hero').addClass("blank"); 

с помощью CSS:

.hero.blank { background-color: transparent; } 

Как .hero.blank более специфичен, чем .hero, он будет применен стиль первой.

Answer 4

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

Если вы хотите очистить фоновое изображение и сделать фон прозрачным, вам просто нужно изменить оба в том же.CSS функция

попробовать

$('.hero').css("background-image:none; background-color:transparent"); 

или просто установить 2-й класс CSS, который имеет стиль отформатированный «heroAlt» и использовать JQuery, чтобы удалить старый класс/добавить новый класс

$('.hero').removeClass(function(){ 
    $(this).addClass("heroAlt"); 
}); 

надежду, что помогает

Answer 5

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

$('.hero').css('background-image', 'none').css('background-color', 'transparent'); 

См: http://jsfiddle.net/Az7VZ/

Это, как говорится, есть несколько подводных камней, чтобы не упустить.

1. Вы запускаете свой JavaScript перед HTML-документом, содержащим нагрузки .hero div. Это приводит к тому, что jQuery ничего не делает для применения CSS.

2. Ваш CSS использует модификатор «! Important». Вы не сможете перегружать этот стиль с помощью jQuery.

3. Кроме того, не забудьте «$» или «jQuery» в вашем скрипте.

Примечание: это НЕ переопределяет действительный класс .hero. Поэтому, если вы добавите еще один элемент с классом «hero», тогда он будет иметь оригинальный стиль CSS. Вам нужно будет снова запустить сценарий jQuery, чтобы применить новый стиль к новому элементу.

Отличная альтернатива этому, создает различные классы с желаемыми стилями. Затем удаление/добавление класса CSS с помощью JQuery:

$('.hero').removeClass('hero').addClass('hero2'); 

См: http://jsfiddle.net/Az7VZ/1/