Question

我的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; }

我想删除“style”属性中的所有“font-size”和“font-family”，但不删除“color”和其他在外部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

Answer 1

对于那些不使用jQuery的用户，可以使用原生removeProperty方法从内联样式中删除特定样式。例如：

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

当然，IE＆lt; 9不支持这个，所以你必须使用

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

所以跨浏览器的方式是：

if (elem.style.removeProperty) {
    elem.style.removeProperty('font-family');
} else {
    elem.style.removeAttribute('font-family');
}

Answer 2

将属性设置为inherit：

$('#foo').css('font-family','inherit').css('font-size','inherit');

Answer 3

我认为没有正确解决此问题的方法（不更改标记）。您可以搜索并替换style属性的值：

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

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

Answer 4

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

elem.style.border = "";

类似地，设置边框：

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

也应该在所有浏览器中都可以使用！

Answer 5

我的建议是远离使用内联样式设置这些东西。我建议使用类，然后使用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');

Answer 6

动态添加和删除嵌入式样式属性

var check=()=>{
console.log('test')
var el=document.getElementById("id");

var condition=el.style['color']!=""?true:false;

if(condition){

el.style.removeProperty('color')

}
else{

el.style.color="red"

}


}

<div id="id" style="display:block">dynamic style</div>


<button onclick="check()">apply style</button>

Answer 7

从我所看到的，你真的需要两种不同的款式。在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');

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

7 个答案: