使用Javascript | jQuery删除特定的内联样式

我的html中有以下代码:

<p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p>

在我的外部CSS中:

#foo{ font-size:11pt; font-family:arial; color:#000; }

我想删除“样式”属性中的所有“字体大小”和“字体系列”,但不删除“颜色”和其他放置在外部CSS中的颜色。

预期结果:

<p id='foo' style='text-align:center; color:red'>hello world</p>

已经尝试过:

$('#foo').removeAttr('style');   // That removes all inline
$('#foo').css('font-family',''); // That remove the css setted too
Rafalages asked 2019-11-07T22:06:48Z
6个解决方案
103 votes

对于不使用jQuery的用户,可以使用本机的removeProperty方法从内联样式中删除特定样式。 例:

elem.style.removeProperty('font-family');

当然,IE <9不支持此功能,因此您必须使用

elem.style.removeAttribute('font-family');

所以跨浏览器的方法是:

if (elem.style.removeProperty) {
    elem.style.removeProperty('font-family');
} else {
    elem.style.removeAttribute('font-family');
}
Ben L answered 2019-11-07T22:07:17Z
14 votes

将属性设置为inherit

$('#foo').css('font-family','inherit').css('font-size','inherit');
Guffa answered 2019-11-07T22:07:40Z
3 votes

我认为没有适当的解决方案来解决这个问题(不更改您的标记)。 您可以搜索并替换样式属性的值:

var element = $('#foo');
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, ''))

到目前为止,最好的解决方案是摆脱内联样式,并通过使用类来管理样式。

jwueller answered 2019-11-07T22:08:10Z
1 votes

我的建议是不要使用内联样式设置这些东西。 我建议使用类,然后使用jQuery在它们之间切换:

CSS:

#foo{ font-size:11pt; font-family:arial; color:#000; }
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red}

HTML:

<p id="foo" class="highlight">hello world</p>

使用Javascript:

$('#foo').removeClass('highlight');
$('#foo').addClass('highlight');
lonesomeday answered 2019-11-07T22:08:39Z
1 votes

在2019年,删除属性的最简单方法似乎是:

elem.style.border = "";

同样,要设置边框:

elem.style.outline = "1px solid blue";

也应该适用于所有浏览器!

53c answered 2019-11-07T22:09:15Z
-1 votes

从我可以看到的角度来看,您确实需要两种不同的样式。 在CSS中进行设置可能更容易,然后根据需要使用jQuery进行删除/添加:

#styleOne { color: red; font: normal 14pt Verdana; text-align: center; }

#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; }

您的初始html如下所示:

<p id="styleOne">hello world</p>

然后在jQuery中还原为styleTwo

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');
Alex P answered 2019-11-07T22:09:51Z
translate from https://stackoverflow.com:/questions/4033004/remove-a-specific-inline-style-with-javascriptjquery