145

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. :)

2

8 Answers 8

215

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.

5
  • 21
    Note null silently fails in IE11. Use '' instead. Apr 10, 2017 at 16:31
  • 6
    Does not work in IE. You should use style.removeProperty() or set to empty string as @OliverJosephAsh commented
    – mikep
    Jan 30, 2018 at 11:33
  • 5
    Hint: with attributes which contain a hypen (like max-width) you can use this syntax: element.style.maxWidth = ''; or that syntax: element.style['max-width'] = '';
    – zingi
    Apr 13, 2020 at 8:23
  • Style attributes are of type string. Assigning null results in unexpected behaviour. Also Typescript compiler will throw error. Assign always an empty string to unset the property like mentioned in the comments above. Jan 19, 2022 at 23:36
  • 3
    As of Sep. 2022 Typescript typing for these style properties, null cannot be assigned. Use .removeProperty as @madhu's answer describes.
    – Harald
    Sep 24, 2022 at 7:23
118
var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");
4
  • 4
    Could you edit to explain why this code is correct? Dec 11, 2018 at 9:24
  • 4
    Although this code might solve the problem, a good answer should always explain how this code helps and what it does.
    – BDL
    Dec 11, 2018 at 9:27
  • 56
    I don't know, to me that code is self explanatory... If he had to explain what the code does, he would just reiterate what was asked for in the OP.
    – bug-a-lot
    Dec 11, 2018 at 11:35
  • 11
    Note that with this approach you use the CSS-style property name in the string rather than the camel case style used elsewhere in JavaScript. For example, you would write .removeProperty("font-family") rather than .removeProperty("fontFamily"). Feb 6, 2021 at 1:01
8

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.

1
  • This answer expects you to know what the old style was (aka color = red) Therefor the answer of Blackus is better.
    – Air2
    Feb 10, 2016 at 16:30
5

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); 
2
  • 6
    Everyone is averse to using regex
    – Tony L.
    Jun 11, 2020 at 20:15
  • Though I understand why this might be useful in some cases, forcing a reparse of the style attribute is inefficient and may no longer be necessary depending on the situation. ES6 provides destructuring assignment where arrays or objects can be used , e.g. let assignStyles = props => { const { color, width, height } = props; elem.style = { color, width, height }; }, compiled once and more efficient, though (much) more verbose, also not practical for dynamic requirements.
    – Nolo
    Jun 30, 2020 at 13:06
2

You can simply set that style to [unset], It forces CSS to pretend that style was never assigned to the given element.

var element = document.getElementById('sample_id');

element.style.width = "unset";
element.style.height = "unset";

1
  • Only one that worked for me
    – Ray Toal
    Jul 28 at 20:30
1
$("#sample_id").css({ 'width' : '', 'height' : '' });
1
  • One line solution is always the best Sep 16, 2022 at 6:23
0

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";
-1

Just use like this

 $("#sample_id").css("width", "");
 $("#sample_id").css("height", "");
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.