Удалить фоновое изображение из стиля

Ответ 1

Вы пробовали:

$(".mozgradient").css("background", "");

Установка фона в пустую строку должна удалить встроенный стиль, чтобы вступили в силу настройки класса и других таблиц стилей, но не должны влиять на другие стили, которые были установлены как строка width. (В этом случае удаление его из всех элементов с классом mozgradient предотвращает конфликт, о котором вы говорите.)

Из jQuery.css() doco:

Установка значения свойства style в пустую строку - например. $('# mydiv'). css ('color', '') - удаляет это свойство из элемента, если оно уже было применено непосредственно, будь то в атрибуте стиля HTML, через метод jQuery.css() или через прямой DOM манипулирует свойством стиля.

Ответ 2

Я не совсем уверен, что вам нужно, но я полагаю, что у вас есть встроенный стиль в теге div, а через CSS вы пытаетесь пережить это.

Единственный параметр здесь - это флаг !important в вашем файле css. Итак, в вашем файле css у вас будет следующее:

.mozgradient {background-image(whatever) !important}

UPDATE:

Теперь я вижу, что вы пытаетесь сделать это через jQuery. Попробуйте следующее:

var divWidth = $yourDiv.css('width');

$yourDiv.removeAttr('style').css('width', divWidth);

Хотя обратите внимание, что это будет работать только при условии, что "ширина" является единственным встроенным стилем css, который вы хотите сохранить. Если там может быть какой-то встроенный стиль, вам придется прибегнуть к использованию CSS-функции выше использования! Важно или использовать jQuery, захватить весь атрибут стиля и загрязнить REGEX, чтобы разобрать любые стили фонового изображения.

ОБНОВЛЕНИЕ II:

ОК, основываясь на комментариях, это становится сложным. Задача состоит в том, что может быть любое количество встроенных стилей, применяемых через атрибут style (ugh! Я чувствую вашу боль!), И мы хотим только очистить background-image, чтобы мы могли позволить внешнему CSS обрабатывать его.

Вот еще один вариант:

// create a div and attach the class to it
$testDiv = $('<div>').class('mozgradient').css('display','none');

// stick it in the DOM
$('body').append($testDiv);

// now cache any background image information
var bgndImg = $testDiv.css('background-image');

// get rid of the test div you want now that we have the info we need
$testDiv.destroy();

// now that we have the background-image information 
// from the external CSS file, we can re-apply it
// to any other element on the page with that class
// name to over-ride the inline style
$('.mozgradient').css('background-image',bgndImg);

Неуклюжий, но я думаю, что это сработает.

Ответ 3

Если вы хотите динамически удалять фоновое изображение, используйте функцию $("selector").css(); в jQuery или приложении CSS CSS background:none Подробнее см.: http://jsfiddle.net/creativegala/um3Ez/

Ответ 4

Обходным решением будет "reset" свойство. В этом случае я думаю, что следующее должно сделать трюк:

div[class="mozgradient"] { background-image: none !important; }

Ответ 5

$(div you use).removeAttr('style')

это должно удалить стиль

$(div you use).attr('style', 'width: 100px');

а затем должен добавить указанный стиль только с высотой

не уверен, что это то, что вы хотите

Ответ 6

Лучший способ справиться с этим - на уровне HTML или на любой серверной стороне script, которую вы используете для создания HTML. Просто не печатайте атрибут стиля. После этого он занимает наивысший приоритет в каскаде CSS, поэтому он превосходит все остальное в определениях классов или идентификаторов.

Второй вариант - перегрузить его после загрузки с помощью JavaScript. Вы не можете удалить его, но вы можете заменить его тем, что класс пытается передать, если вы можете добавить к нему тег id.

.mozgradient { background-image:url(http://domain.com/2.jpg); } /* will not work */
#fixedelement { background-image:url(http://domain.com/2.jpg); } /* will not work */
<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient" id="fixedelement"></div>
<script type="text/javascript">
fixedelement.style.backgroundImage = 'url(http://domain.com/2.jpg)'; /* will work */
</script>