최대 높이를 설정 해제하는 방법?

max-heightCSS 규칙에서 이전에 설정 한 경우 속성을 기본값으로 재설정하는 방법 은 무엇입니까? 작동하지 않습니다.

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

참고

다음 CSS를 사용하여 max-height 속성을 지울 수 있습니다.

max-height:none; 

당신처럼 스타일 요소를 자바 스크립트를 사용하는 경우 그냥 참고 $el.style.maxHeight = '50px';사용 $el.style.maxHeight = 'none';"재설정"하지 않습니다 또는 "제거"를 50px, 단순히 그것보다 우선합니다. 즉, 요소를 사용하여 요소의 최대 높이를 "재설정"하려고하면 요소 의 속성에 값을 $el.style.maxHeight = 'none';적용하여 해당 요소와 일치하는 CSS 선택 규칙의 다른 유효한 속성을 재정의합니다 .nonemax-heightmax-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 명의 담당자가 없으므로 의견을 말할 수 없습니다.

건배.

둘 중 하나를 사용하십시오

max-height: none;

또는

max-height: 100%;

참고 : 두 번째는 포함 블록의 높이와 관련이 있습니다.

당신이 사용할 수있는

max-height: unset;

이 속성은 부모로부터 상속하는 경우 속성을 상속 된 값으로 재설정하고 (키워드 상속으로 작동) 상속하지 않는 경우 속성을 초기 값으로 재설정합니다 (키워드 초기 값으로 작동).