如果之前已经在某些CSS规则中设置了max-height
属性,如何将其重置为默认值?这不起作用:
pre {
max-height: 250px;
}
pre.doNotLimitHeight {
max-height: auto; // Doesn't work at least in Chrome
}
发布于 2012-12-21 18:15:05
您可以使用以下css清除max-height属性:
max-height:none;
发布于 2019-11-06 22:29:49
您可以使用
max-height: unset;
如果你从它的父级继承(将作为关键字继承),它会将属性重置为其继承值,如果你没有继承,它将重置为其初始值(将作为关键字初始)。
发布于 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个代表,所以我不能评论。
干杯。
https://stackoverflow.com/questions/13988145
复制相似问题