Question

如果先前在某些css规则中设置了max-height属性，如何将其重置为默认值？因为这不起作用：

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: auto; //Doesn't work at least in chrome
}

Answer 1

将其重置为none：

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

<强> Reference

Answer 2

您可以使用以下css清除max-height属性：

max-height:none;

Answer 3

请注意，如果您使用JavaScript来使用$el.style.maxHeight = '50px';设置$el.style.maxHeight = 'none';等元素的样式，则不会＆＃34;重置＆＃34;或＆＃34;删除＆＃34; 50px，它只会覆盖它。这意味着，如果你试图＆＃34;重置＆＃34;使用$el.style.maxHeight = 'none';的元素的最大高度它将none值应用于元素的max-height属性，覆盖匹配的CSS选择规则中的任何其他有效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.
});

实际上＆＃34;取消设置＆＃34;在内联样式中，您应该使用$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个代表，所以我无法发表评论。

干杯。

Answer 4

使用

max-height: none;

或

max-height: 100%;

注意：第二个是相对于包含块的高度。

Answer 5

您可以使用

max-height: unset;

，如果您是从父级继承的属性，它将重置为它的继承值（将用作关键字herent），如果您不继承它，则会将其重置为初始值（将作为关键字initial）。

如何取消设置最大高度？

5 个答案: