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

【问题标题】：Remove a specific inline style with Javascript|jQuery使用 Javascript|jQuery 删除特定的内联样式
【发布时间】：2010-10-27 12:12:04
【问题描述】：

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

【问题讨论】：

@John 请停止编辑 JavaScript 标记中关于 JavaScript 的问题。

标签： javascript jquery

【解决方案1】：

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

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

当然，IE

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

所以跨浏览器的方法是：

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

【讨论】：

+1 这绝对解决了问题，而不是接受的答案。但是你的旧 IE 后备应该是 elem.style.removeAttribute('fontFamily'); 我相信..
+1 绝对是最佳答案。 elm.style.removeProperty() 和 elm.style.setProperty()。谢谢你的光。
甚至不知道 removeProperty... lulz，谢谢 Ben！

【解决方案2】：

将属性设置为inherit:

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

【讨论】：

非常感谢，它将永远帮助我...我使用 cms 允许用户使用 tinyMCE 在文本中设置他想要的内容。
inherit 应该从父级继承值，而不是从不太常见的样式规则中继承
@GetFree 是对的。您可能不想使用inherit。想象一下，如果您在列表项内的 div 上设置 div.style.display = 'inherit' - 该 div 最终会以 display: list-item 结尾，这几乎肯定不是您想要的。

【解决方案3】：

我认为这个问题没有适当的解决方案（不改变你的标记）。您可以搜索并替换样式属性的值：

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

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

【讨论】：

【解决方案4】：

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

elem.style.border = "";

同样，设置边框：

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

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

【讨论】：

【解决方案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');

【讨论】：

【解决方案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>

【讨论】：

【解决方案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');

【讨论】：