Удалите полный CSS из DIV с помощью Jquery

Question

В моем css у меня есть

    * {
 font-family: "Meiryo UI" , Verdana;
 font-size:13px;
 }
input, select, textarea {
 font-size: 12px;
 border-color: #333;
 color: #333;
 border-style: solid;
 border-width: 1px;
}

Но я хочу один DIV без CSS.Я пытался

$('#preview').removeClass()
$('#preview').removeAttr("style")
$('#preview').children().removeAttr/Class

Но ... но безрезультатно.Помогите мне удалить все стили из этого div с помощью Jquery или просто некоторого JavaScript.

Он пришел из таблицы стилей.Это предварительный просмотр моего вопроса: https://emailinvest.com/preview.jpg что я хочу.

Answer 1

Наследование в CSS чаще полезно, чем не помогает, поэтому выберите другой путь:

a) Переопределите указанные вами стили

#preview .input, #preview select, #preview textarea { }

или

b) Сделайте так, чтобы указанные вами стили предназначались для другой области, используя префиксный селектор, например

#selector * { font: 13px "Meiryo UI", Verdana; }
#selector input, #selector select, #selector textarea { }

Answer 2

Ваша таблица стилей не указывает классы или конкретные элементы (идентификаторы), и поэтому стили применяются к всем элементам, которые совпадают по тегу.

В частности, ваша кнопка стилизована под стиль элемента «input», указанный в таблице стилей.

Это означает, что у вас нет классов, которые можно легко удалить, чтобы сбросить стиль.

В частности, очень трудно вернуть кнопки к их первоначальному стилю, когда они настроены на что-то другое, особенно в кросс-браузерной форме.

У вас есть несколько вариантов, из которых только один является разумным:

1. Как и предполагал медер выше не не устанавливайте стиль для этого div в первую очередь. Это лучший вариант. Вы можете сделать это, либо установив явные имена классов или идентификаторы для своих других div и перечислив их в таблицу стилей, ИЛИ добавив класс для div, который вы хотите игнорировать, и используйте селектор not, например input:not(.myUnstyledButtonClass) (это только работает в современных браузерах)
2. Вручную создайте свой DIV внутри IFrame, чтобы он не подчинялся стилю основного документа. Это кажется излишним, хотя
3. Я не тестировал этот, но вы можете попробовать создать iFrame, отобразить кнопку (которая будет иметь форму без стиля), а затем повторить и повторить и скопировать все свойства и стили неустановленная кнопка для кнопки в вашем div. Существует очень малая вероятность того, что это сработает. Я бы даже не стал пробовать это ...

Перейти с 1 - что предложил медик. Вероятно, стоит опубликовать код, который вы пытались использовать, когда прокомментируете ему, что «Я пытался ... безрезультатно». Скорее всего, вы просто неверно истолковали его предложение или что-то упустили.

Например, смотрите: http://jsbin.com/ikobe4

Чтобы использовать ": not ()", вам нужно добавить unstyled (или что вы выберете) в качестве класса для вашей кнопки, например:

<input type="button" class="unstyled" value="Button Text" />

И измените селектор в файле css с

input, select, textarea {

до

input:not(.unstyled), select, textarea {

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

Answer 3

Если вы хотите использовать removeClass, вы должны указать, какой класс удалить, или он не будет работать:

$('#preview input').removeClass('classToRemove')

$('#preview button').removeClass('classToRemove')

Вы можете проверитьс помощью Firebug какой класс присвоен этой кнопке и попробуйте удалить ее следующим образом.

Или вы можете установить свои стили прямо на это:

$('#preview button').css('background','#ccc');

Или этот .. но я 'я не уверен, что это работает:

$('#preview').children().removeAttr('class'); // or 'style'