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

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

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

6 ответов:

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

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

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

Из jQuery .css () doco :

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

13

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

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

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

Обновление:

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

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

$yourDiv.removeAttr('style').css('width', divWidth);
Хотя обратите внимание, что это будет работать только при условии, что 'width' является единственным встроенным стилем css, который вы хотите сохранить. Если бы там мог быть какой-либо встроенный стиль, вам пришлось бы прибегнуть к любому варианту CSS выше использования !важно или с помощью jQuery, захватить весь атрибут стиля и получить грязный с регулярным выражением, чтобы разобрать любые стили фонового изображения в частности.

ОБНОВЛЕНИЕ 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);

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

2

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

2

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

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

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

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

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

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

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

0

Лучший способ справиться с этим - на уровне 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>
0