jQuery: как удалить встроенный стиль из элемента?

Question

У меня есть контейнер вкладок, использующий <li> в качестве определения вкладки (обычная практика). У <li> есть стиль, связанный с ним в файле style.css. Это имеет цвет фона и фоновое изображение.

Теперь каждый контейнер под вкладками, которые содержат <li> в содержимом, будет иметь определение таблицы стилей (фоновое изображение и цвет).

Как мне переопределить это в области содержимого с помощью jQuery? Я не могу изменить содержимое, поскольку оно управляется базой данных и используется в другом месте приложения.

Спасибо!

Answer 1

Для этого вам не нужен jQuery, вы можете просто добавить объявление CSS в вашу иерархию, которое удаляет цвет фона и изображение для дочерних элементов li. Например,

.tabs li { background-color: red; background-image: url(something.jpg) }

.tabs li div li { background-color: transparent; background-image: none; }

Чтобы сделать это с помощью jQuery,

$(".tabs > li div li").css("background-color", "transparent");
$(".tabs > li div li").css("background-image", "none");

Answer 2

Вы можете переопределить CSS, указав более конкретные правила - это утомительно, потому что вам нужно отменить правила, которые были указаны ранее, но это возможно.

Например, если у вас есть:

li {
   height: 100px;
} 

Вы можете сбросить его с помощью:

li li {
   height: auto;
}

Лучшим способом было бы убедиться, что информация о стиле для вкладок работает только на вкладках. Если вы добавляете класс в tab-li, вы можете просто установить

li.tab {
   height: 100px;
}

и это не повлияет на элементы li под вкладкой. Таким образом, вам не нужно менять содержимое (я надеюсь, что вкладки не являются частью этого содержимого), и вам не нужно прибегать к JavaScript, чтобы отменить все.

Answer 3

Я не пробовал этого, но лучше всего было бы добавить тег <div> в <li> и загрузить содержимое в <div>. Затем создайте определение для <div>, указав background:none. Затем это должно каскадно перейти к загруженному контенту.