从风格中删除背景图像

如何从元素风格中删除背景图像。我不想将它设置为none或0.我想完全删除它。它与在另一个类中定义的moz-linear-gradient冲突。从风格中删除背景图像

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

来源

2011-11-07 Pinkie

我们需要在这里澄清。删除它'如何'？在文本编辑器中？通过CSS？使用Javascript？ –

通过jQuery或JavaScript删除它，所以div看起来像'

' – Pinkie

@Pinkie据我所知，每个元素都有background-image：none;默认。使用JavaScript删除它只会将它重置为默认值，因为它没有重写属性。所以很不幸，你无法摆脱它。 – joshnh

你试过了吗：

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

设定背景为空字符串应该删除内嵌样式，使得类和其他样式设置生效，但它不应该影响分别设置内嵌像width其他样式。（在这种情况下，使用mozgradient类从所有元素中删除它可以避免您正在讨论的冲突。）

从the jQuery .css() doco：

的样式属性的值设置为空字符串 - 例如$（'＃mydiv'）.css（'color'，''） - 如果元素已经直接应用，则从该元素中移除该属性，无论是HTML样式属性，通过jQuery的.css（）方法，还是通过直接样式属性的DOM操作。

来源

2011-11-07 04:10:49 nnnnnn

这很有趣！我需要去试试这个。可能是一个有用的提示！ –

nnnnnn - 这是很好的信息！文档的最后一部分似乎表明@pinkie正在寻找的内容“然而，它并没有删除已在样式表或元素中应用CSS规则的样式。” （让我们知道，如果这项作品小指！） –

这是完美的。这是我需要的 – Pinkie

我不完全相信你所追求的，但我让你对div标签内嵌式的假设，并通过CSS，你想为忽略这一点。

这里唯一的选择是你的css文件中的!important标志。所以，在你的CSS文件，你就会有这样的：

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

UPDATE：

我，现在你正在尝试通过jQuery做看看。试试这个：

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

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

虽然注意，这只会工作提供'宽度'是唯一的CSS内联风格，你想保留。如果在那里可能有任何内联样式，那么必须使用上面的使用！important或使用jQuery的CSS选项，抓住整个样式属性并使用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);

笨重，但我认为它会工作。

来源

2011-11-07 03:54:17

我无法使用此功能。我不知道我有多少种风格。它是动态生成的。我只需要看看背景图像。 – Pinkie

你不能使用哪个部分？ –

jQuery部分。你创建一个可变的divwidth。我可能有20种不同的风格动态生成。我不能像这样分配变量。 – Pinkie

解决方法是“重置”属性。在这种情况下，我觉得有以下应该做的伎俩：

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

来源

2011-11-07 04:03:10 iglvzx

我认为这与OP正在寻找的是相反的。他们不需要内联样式，以便使用外部css文件中.mozgradient类中定义的背景图像。 –

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

这应该删除样式

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

，然后应该只是高度

添加指定的样式

不知道是不是你想要的

来源

2011-11-07 04:05:41

唉，这将不起作用，因为OP不知道哪些样式可能内联（听起来像可能有任何数量） –

如果要动态地消除背景图像，然后使用$("selector").css();功能的jQuery或旅店CSS应用background:none多见于：http://jsfiddle.net/creativegala/um3Ez/

来源

2011-11-07 07:27:44

处理这种情况最好的办法是在HTML水平或在任何服务器您用来创建HTML的脚本脚本。只要它不打印样式属性。一旦它在那里，它在CSS级联中占据最高优先级，因此它会覆盖类或id定义中的其他任何内容。

第二个最佳选择是使用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>

来源

2013-07-17 18:31:45

从风格中删除背景图像

回答

相关问题