我在想这是否可能。
有这个元素。
<div id="sample_id" style="width:100px; height:100px; color:red;">
所以我想要移除 width:100px; 和 height:100px;
结果将是
<div id="sample_id" style="color:red;">
任何帮助都将不胜感激。 :)
移除元素的样式
145
任何帮助都将不胜感激。 :)
- Wesley Brian Lachenal
2
2请检查问题标签...他正在询问如何使用JavaScript从元素中删除CSS规则... - Thanos
2可能是通过JavaScript删除HTML元素样式的重复问题。 - T.Todua
8个回答
215
你可以使用纯Javascript编辑样式。无需库，支持除IE外的所有浏览器，在IE中需要将null设置为''（请参见注释）。
var element = document.getElementById('sample_id');
element.style.width = null;
element.style.height = null;
了解更多信息，请参考 MDN 上的 HTMLElement.style 文档。
- Blackus
5
21注意：在IE11中，使用
null会悄无声息地失败，请改用''代替。 - Oliver Joseph Ash6在IE浏览器上无法工作。您应该使用style.removeProperty()或将其设置为空字符串，就像@OliverJosephAsh评论中所说的那样。 - mikep
5提示：对于包含连字符的属性（例如
max-width），您可以使用以下语法：element.style.maxWidth = ''; 或者这种语法：element.style['max-width'] = '';（翻译完成，已按要求返回结果） - zingi样式属性是字符串类型。赋值为null会导致意外行为。此外，TypeScript编译器将抛出错误。请始终分配一个空字符串来取消设置属性，如上面的注释中所述。 - XtraBytesLab
3截至2022年9月，这些样式属性的Typescript类型化不允许赋值为
null。请使用如@madhu所述的.removeProperty方法。 - Harald118
var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");
- madhu sudhanan
4
4你能[编辑]一下，解释一下这段代码为什么是正确的吗？请保持原意不变，使其更加易懂。 - TheLethalCoder
4虽然这段代码可能解决问题，但一个好的答案应该总是解释这段代码如何帮助解决问题以及它的作用。 - BDL
56对我来说，那段代码很容易理解...... 如果他必须解释代码的作用，他只会重申在原始问题中要求的内容。 - bug-a-lot
11请注意，这种方法需要在字符串中使用 CSS 样式属性名，而不是 JavaScript 中其他地方使用的驼峰命名方式。例如，您应该编写
.removeProperty("font-family") 而不是 .removeProperty("fontFamily")。 - Toastrackenigma8
使用JavaScript
但这取决于你想要做什么。如果你只想改变高度和宽度，我建议使用以下代码：
{
document.getElementById('sample_id').style.height = '150px';
document.getElementById('sample_id').style.width = '150px';
}
为了完全删除它，请删除样式，然后重新设置颜色：
getElementById('sample_id').removeAttribute("style");
document.getElementById('sample_id').style.color = 'red';
当然，现在唯一的问题是，在哪个事件上你希望这种情况发生。
- user2685803
1
这个答案希望你知道旧的样式是什么（也就是color = red）。因此，Blackus的回答更好。 - Air2
5
更新：更好的方法请参考同一篇文章中Blackus的回答。
如果您不反对使用JavaScript和Regex，可以使用以下解决方案来查找style属性中所有的width和height属性，并将它们替换为空。
//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);
- Harry
2
6大家都不喜欢使用正则表达式。 - Tony L.
尽管我明白在某些情况下这可能很有用，但强制重新解析样式属性效率低下，根据情况可能不再必要。ES6提供了解构赋值，其中可以使用数组或对象，例如
let assignStyles = props => { const { color, width, height } = props; elem.style = { color, width, height }; }，编译一次并更有效，虽然（更）冗长，但对于动态需求也不实用。 - Nolo2
您可以将该样式设置为[unset]，这会强制CSS假装从未将该样式分配给给定的元素。
var element = document.getElementById('sample_id');
element.style.width = "unset";
element.style.height = "unset";- Kianoush
1
只有这一个对我有效。 - Ray Toal
1
$("#sample_id").css({ 'width' : '', 'height' : '' });
- Janith Chinthana
1
一行代码的解决方案总是最好的。 - Ahmad Pujianto
0
在宽度和高度元素上指定auto与从技术上删除它们相同。使用原生JavaScript：
images[i].style.height = "auto";
images[i].style.width = "auto";
- Grant
-1
就像这样使用
$("#sample_id").css("width", "");
$("#sample_id").css("height", "");
- Bindiya Patoliya
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接