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

Question

Как я могу удалить фоновое изображение из стиля элемента.Я не хочу устанавливать его в ноль или 0. Я хочу удалить его полностью.это конфликтует с moz-linear-gradient, который определен в другом классе.

<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient"></div>

Answer 1

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

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

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

Из jQuery .css () doco :

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

Answer 2

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

Answer 3

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

Единственная опция здесь - это флаг !important в вашем файле css. Таким образом, в вашем файле CSS у вас будет это:

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

UPDATE:

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

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

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

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

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

ОК, основываясь на комментариях, это становится сложно. Проблема в том, что может быть любое количество встроенных стилей, применяемых через атрибут style (тьфу! Я чувствую вашу боль!), И мы хотим только очистить 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);

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

Answer 4

Лучший способ справиться с этим - на уровне HTML или в любом серверном скрипте, который вы используете для создания 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>

Answer 5

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

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

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

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

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

Answer 6

Обходным путем будет «сброс» свойства.В этом случае, я думаю, что следующее должно помочь:

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