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

당신처럼 스타일 요소를 자바 스크립트를 사용하는 경우 그냥 참고 $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;