Как сбросить максимальную высоту?

Как мне сбросить max-heightсвойство на его значение по умолчанию, если оно было предварительно установлено в каком-то правиле CSS? Это не работает:

pre {
  max-height: 250px;
}

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

Сбросить его до none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Ссылка

Вы можете очистить атрибут max-height с помощью следующего css:

max-height:none; 

Просто обратите внимание, что если вы используете JavaScript для стилизации элемента, как $el.style.maxHeight = '50px';при использовании $el.style.maxHeight = 'none';не будет «сбрасывать» или «удалять» 50px, он просто переопределит его. Это означает, что если вы попытаетесь «сбросить» максимальную высоту элемента, используя $el.style.maxHeight = 'none';его, вы примените noneзначение к max-heightсвойству элемента, переопределив любые другие допустимые max-heightсвойства в правилах выбора CSS, которые соответствуют этому элементу.

Пример:

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 представителей, поэтому я не могу комментировать.

Приветствия.

Используйте либо

max-height: none;

или

max-height: 100%;

Примечание : второе относится к высоте содержащего блока.

Ты можешь использовать

max-height: unset;

который сбрасывает свойство к его унаследованному значению, если вы наследуете от его родителя (будет работать как наследование ключевого слова), а если вы не наследуете, оно сбрасывается к его начальному значению (будет работать как ключевое слово initial).