如何取消设置max-height？
如何取消设置max-height？
提问于 2012-12-21 18:12:21
如果之前已经在某些CSS规则中设置了max-height属性，如何将其重置为默认值？这不起作用：
pre {
max-height: 250px;
}
pre.doNotLimitHeight {
max-height: auto; // Doesn't work at least in Chrome
}回答 3
Stack Overflow用户
发布于 2012-12-21 18:15:05
您可以使用以下css清除max-height属性：
max-height:none; Stack Overflow用户
发布于 2019-11-06 22:29:49
您可以使用
max-height: unset;如果你从它的父级继承(将作为关键字继承)，它会将属性重置为其继承值，如果你没有继承，它将重置为其初始值(将作为关键字初始)。
Stack Overflow用户
发布于 2017-04-08 11:45:39
需要注意的是，如果您使用JavaScript设置元素样式，例如使用$el.style.maxHeight = 'none';的$el.style.maxHeight = '50px';将不会“重置”或“移除”50px，它只会覆盖它。这意味着，如果您尝试使用$el.style.maxHeight = 'none';“重置”元素的最大高度，它会将CSS值应用于该元素的max-height属性，覆盖与该元素匹配的none选择规则中任何其他有效的max-height属性。
举个例子：
styles.css
.set-max-height { max-height: 50px; }main.js
document.querySelectorAll('.set-max-height').forEach($el => {
if($el.hasAttribute('data-hidden')){
$el.style.maxHeight = '0px'; // Set max-height to 0px.
} else {
$el.style.maxHeight = 'none'; // 'Unset' max-height according to accepted answer.
});要真正“取消设置”内联样式，您应该使用$el.style.removeProperty('max-height');。
要为整个样式规则而不仅仅是单个元素完成此操作，应首先找到要修改的规则，然后对该规则调用removeProperty函数：
for(let i = 0; i < document.styleSheets[0].cssRules.length; ++i){
if(document.styleSheets[0].cssRules[i].selectorText == '.set-max-height'){
document.styleSheets[0].cssRules[i].style.removeProperty('max-height');
break;
}
}您可以随心所欲地找到StyleSheet和CssRule对象，但是对于一个简单的应用程序，我相信上面的内容就足够了。
很抱歉把这作为一个答案，但我没有50个代表，所以我不能评论。
干杯。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13988145
复制相关文章
相似问题