If I have the following in my html:
<div style="height:300px; width:300px; background-color:#ffffff;"></div>
And this in my css style sheet:
div {
width:100px;
height:100px;
background-color:#000000;
}
Is there any way, with javascript/jquery, to remove all of the inline styles and leave only the styles specified by the css style sheet?
This question is related to
javascript
jquery
css
inline
$('div').removeAttr('style');
You could also try listing the css in the style sheet as !important
I was using the $('div').attr('style', '');
technique and it wasn't working in IE8.
I outputted the style attribute using alert()
and it was not stripping out inline styles.
.removeAttr
ended up doing the trick in IE8.
Plain JavaScript:
You don't need jQuery to do something trivial like this. Just use the .removeAttribute()
method.
Assuming you are just targeting a single element, you can easily use the following: (example)
document.querySelector('#target').removeAttribute('style');
If you are targeting multiple elements, just loop through the selected collection of elements: (example)
var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
element.removeAttribute('style');
});
Array.prototype.forEach()
- IE9 and above / .querySelectorAll()
- IE 8 (partial) IE9 and above.
If you need to just empty the style
of an element then:
element.style.cssText = null;
This should do good. Hope it helps!
This can be accomplished in two steps:
1: select the element you want to change by either tagname, id, class etc.
var element = document.getElementsByTagName('h2')[0];
element.removeAttribute('style');
Source: Stackoverflow.com