Удалить фоновое изображение из стиля
Как удалить фоновое изображение из стиля элемента. Я не хочу устанавливать его ни на один, ни на 0. Я хочу полностью удалить его. он противоречит moz-linear-gradient
, который определен в другом классе.
<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient"></div>
Ответы
Ответ 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>