使用 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; }

我想删除所有的 font-size和 font-family在 style属性，但不是 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
85497 次浏览
小开

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.

小开

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:

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');
小开

Set the properties to inherit:

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

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:

#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:

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

And then to revert to styleTwo in jQuery

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');
小开
最佳答案

For those that aren't using jQuery, you can delete specific styles from the inline styles using the native removeProperty method. Example:

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

Of course, IE < 9 doesn't support this so you'll have to use

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');
}
小开

In 2019, the simplest way to remove a property seems to be:

elem.style.border = "";

Similarly, to set a border:

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

Should work across all browsers too!

小开

dynamic add and remove inline style property

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>


提交答案