使用 Javascript|jQuery 删除特定的内联样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4033004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove a specific inline style with Javascript|jQuery
提问by Rafalages
I have the following code in my html:
我的 html 中有以下代码：
<p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p>
and that in my external css:
而在我的外部 css 中：
#foo{ font-size:11pt; font-family:arial; color:#000; }
I want to remove all "font-size" and "font-family" in the "style" atribute, but not the "color" and others setted in external css.
我想删除“样式”属性中的所有“字体大小”和“字体系列”，但不删除外部 css 中设置的“颜色”和其他内容。
Result expected:
预期结果：
<p id='foo' style='text-align:center; color:red'>hello world</p>
Already tried:
已经尝试过：
$('#foo').removeAttr('style'); // That removes all inline
$('#foo').css('font-family',''); // That remove the css setted too
回答by Ben L
For those that aren't using jQuery, you can delete specific styles from the inline styles using the native removePropertymethod. Example:
对于那些不使用 jQuery 的人，您可以使用本机removeProperty方法从内联样式中删除特定样式。例子：
elem.style.removeProperty('font-family');
Of course, IE < 9 doesn't support this so you'll have to use
当然，IE < 9 不支持这个，所以你必须使用
elem.style.removeAttribute('font-family');
so a cross browser way to do it would be:
所以跨浏览器的方式是：
if (elem.style.removeProperty) {
elem.style.removeProperty('font-family');
} else {
elem.style.removeAttribute('font-family');
}
回答by Guffa
Set the properties to inherit:
将属性设置为inherit：
$('#foo').css('font-family','inherit').css('font-size','inherit');
回答by jwueller
I think there is no proper solution to this problem (without changing your markup). You could search and replace the style attribute's value:
我认为这个问题没有合适的解决方案（不改变你的标记）。您可以搜索和替换样式属性的值：
var element = $('#foo');
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, ''))
By far the best solution would be to get rid of the inline styles and manage the styles by using classes.
到目前为止，最好的解决方案是摆脱内联样式并通过使用类来管理样式。
回答by 53c
In 2019, the simplest way to remove a property seems to be:
在 2019 年，删除属性的最简单方法似乎是：
elem.style.border = "";
Similarly, to set a border:
同样，要设置边框：
elem.style.outline = "1px solid blue";
Should work across all browsers too!
也应该适用于所有浏览器！
回答by lonesomeday
My suggestion would be to stay away from setting this stuff using inline styles. I would suggest using classes and then using jQuery to switch between them:
我的建议是不要使用内联样式设置这些东西。我建议使用类，然后使用 jQuery 在它们之间切换：
CSS:
CSS：
#foo{ font-size:11pt; font-family:arial; color:#000; }
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red}
HTML:
HTML：
<p id="foo" class="highlight">hello world</p>
Javascript:
Javascript：
$('#foo').removeClass('highlight');
$('#foo').addClass('highlight');
回答by Alex P
From what I can see you really need two different styles for the paragraph. It might be easier to set those up in CSS and then just use jQuery to remove / add as you need:
从我所看到的，你真的需要两种不同的段落样式。在 CSS 中设置它们可能更容易，然后根据需要使用 jQuery 删除/添加：
#styleOne { color: red; font: normal 14pt Verdana; text-align: center; }
#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; }
Your initial html will look like:
您的初始 html 将如下所示：
<p id="styleOne">hello world</p>
And then to revert to styleTwo in jQuery
然后在 jQuery 中恢复为 styleTwo
$('p#styleOne').removeClass('styleOne').addClass('styleTwo');
