javascript - Remove Style on Element - Stack Overflow

admin管理员组

文章数量:1134232

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

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
• html
• css

Share Improve this question Follow edited Sep 9, 2013 at 4:56 Praveen Prasannan 7,1231010 gold badges5252 silver badges7171 bronze badges asked Sep 9, 2013 at 4:51 Brian CoolidgeBrian Coolidge 4,64999 gold badges5252 silver badges8282 bronze badges 2

• 2 Check the question tags.... he is asking how he can remove a CSS rule from an element with JavaScript... – Thanos Commented Sep 9, 2013 at 5:15
• 2 Possible duplicate of removing html element styles via javascript – T.Todua Commented Aug 31, 2016 at 12:34

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 232

You can edit style with pure Javascript. No library needed, supported by all browsers

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

element.style.width = '';
element.style.height = '';

For more information, you can refer to HTMLElement.style documentation on MDN.

var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");

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.

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

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); 

$("#sample_id").css({ 'width' : '', 'height' : '' });

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

Just use like this

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

本文标签： javascriptRemove Style on ElementStack Overflow