Wie deaktiviere ich die maximale Höhe?

Wie max-heightsetze ich die Eigenschaft auf die Standardeinstellung zurück, wenn sie zuvor in einer CSS-Regel festgelegt wurde? Das funktioniert nicht:

pre {
  max-height: 250px;
}

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

Setzen Sie es zurück auf none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Referenz

Sie können das Attribut max-height mithilfe des folgenden CSS löschen:

max-height:none; 

Nur eine Notiz, wenn Sie JavaScript - Stil das Element verwenden , wie $el.style.maxHeight = '50px';mit $el.style.maxHeight = 'none';nicht „Reset“ oder „Entfernen“ das 50px, wird es einfach überschreiben. Dies bedeutet, dass beim Versuch, die maximale Höhe eines Elements mithilfe $el.style.maxHeight = 'none';dieses Elements "zurückzusetzen" , der noneWert auf die max-heightEigenschaft des Elements angewendet wird und alle anderen gültigen max-heightEigenschaften in CSS-Auswahlregeln überschrieben werden , die diesem Element entsprechen.

Ein Beispiel:

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.
});

Um einen Inline-Stil tatsächlich zu "deaktivieren", sollten Sie verwenden $el.style.removeProperty('max-height');.

Um dies für eine gesamte Stilregel und nicht nur für ein einzelnes Element abzuschließen, sollten Sie zuerst die Regel suchen, die Sie ändern möchten, und dann die removePropertyFunktion für diese Regel aufrufen :

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;
  }
}

Sie finden das StyleSheetundCssRule Objekte finden, wie Sie möchten, aber für eine einfache Anwendung würde das oben Genannte sicher ausreichen.

Es tut mir leid, dass ich dies als Antwort angegeben habe, aber ich habe keine 50 Wiederholungen, daher kann ich keinen Kommentar abgeben.

Prost.

Benutze das eine oder das andere

max-height: none;

oder

max-height: 100%;

Hinweis : Der zweite ist relativ zur Höhe des enthaltenen Blocks.

Sie können verwenden

max-height: unset;

Dadurch wird eine Eigenschaft auf ihren geerbten Wert zurückgesetzt, wenn Sie von ihrem übergeordneten Wert erben (funktioniert als Schlüsselwort-Vererbung). Wenn Sie nicht erben, wird sie auf ihren Anfangswert zurückgesetzt (funktioniert als Schlüsselwort-Initiale).