Remove Style on Element
JavascriptHtmlCssJavascript Problem Overview
I was wondering if this is possible.
There's this element
<div id="sample_id" style="width:100px; height:100px; color:red;">
So I want to remove width:100px; and height:100px;
the result would be
<div id="sample_id" style="color:red;">
Any help would be apprreciated. :)
Javascript Solutions
Solution 1 - Javascript
You can edit style with pure Javascript. No library needed, supported by all browsers except IE where you need to set to ''
instead of null
(see comments).
var element = document.getElementById('sample_id');
element.style.width = null;
element.style.height = null;
For more information, you can refer to HTMLElement.style documentation on MDN.
Solution 2 - Javascript
var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");
Solution 3 - Javascript
Use javascript
But it depends on what you are trying to do. If you just want to change the height and width, I suggest this:
{
document.getElementById('sample_id').style.height = '150px';
document.getElementById('sample_id').style.width = '150px';
}
TO totally remove it, remove the style, and then re-set the color:
getElementById('sample_id').removeAttribute("style");
document.getElementById('sample_id').style.color = 'red';
Of course, no the only question that remains is on which event you want this to happen.
Solution 4 - Javascript
Update: For a better approach, please refer to Blackus's answer in the same thread.
If you are not averse to using JavaScript and Regex, you can use the below solution to find all width
and height
properties in the style
attribute and replace
them with nothing.
//Get the value of style attribute based on element's Id
var originalStyle = document.getElementById('sample_id').getAttribute('style');
var regex = new RegExp(/(width:|height:).+?(;[\s]?|$)/g);
//Replace matches with null
var modStyle = originalStyle.replace(regex, "");
//Set the modified style value to element using it's Id
document.getElementById('sample_id').setAttribute('style', modStyle);
Solution 5 - Javascript
$("#sample_id").css({ 'width' : '', 'height' : '' });
Solution 6 - Javascript
Specifying auto on width and height elements is the same as removing them, technically. Using vanilla Javascript:
images[i].style.height = "auto";
images[i].style.width = "auto";
Solution 7 - Javascript
Just use like this
$("#sample_id").css("width", "");
$("#sample_id").css("height", "");