Remove a specific inline style with Javascript|jQuery
JavascriptJqueryJavascript Problem Overview
I have the following code in my 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:
#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 set in external 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
Javascript Solutions
Solution 1 - Javascript
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');
}
Solution 2 - Javascript
Set the properties to inherit
:
$('#foo').css('font-family','inherit').css('font-size','inherit');
Solution 3 - Javascript
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.
Solution 4 - Javascript
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!
Solution 5 - Javascript
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');
Solution 6 - Javascript
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>
Solution 7 - Javascript
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');