Html 删除元素上的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18691655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Style on Element
提问by Wesley Brian Lachenal
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;
所以我想删除width:100px; 和高度：100px；
the result would be
结果是
<div id="sample_id" style="color:red;">
Any help would be apprreciated. :)
任何帮助将不胜感激。:)
回答by Blackus
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).
您可以使用纯 Javascript 编辑样式。不需要库，除 IE 之外的所有浏览器都支持，您需要将其设置为''而不是null（见评论）。
var element = document.getElementById('sample_id');
element.style.width = null;
element.style.height = null;
For more information, you can refer to HTMLElement.styledocumentation on MDN.
有关更多信息，您可以参考MDN上的HTMLElement.style文档。
回答by madhu sudhanan
var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");
回答by user2685803
Use javascript
使用 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.
当然，剩下的唯一问题是您希望这种情况发生在哪个事件上。
回答by Harry
Update:For a better approach, please refer to Blackus's answer in the same thread.
更新：为了更好的方法，请参考 Blackus 在同一线程中的回答。
If you are not averse to using JavaScript and Regex, you can use the below solution to find all widthand heightproperties in the styleattribute and replacethem with nothing.
如果您不反对使用 JavaScript 和 Regex，您可以使用以下解决方案来查找属性中的所有width和height属性，style而replace它们什么也没有。
//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);
回答by Janith Chinthana
$("#sample_id").css({ 'width' : '', 'height' : '' });
回答by Bindiya Patoliya
Just use like this
就这样使用
$("#sample_id").css("width", "");
$("#sample_id").css("height", "");
回答by Grant
Specifying auto on width and height elements is the same as removing them, technically. Using vanilla Javascript:
从技术上讲，在 width 和 height 元素上指定 auto 与删除它们相同。使用香草 Javascript：
images[i].style.height = "auto";
images[i].style.width = "auto";
