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

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

---

max-height 속성이 이전에 일부 CSS 규칙에서 이미 설정된 경우 max-height 속성을 기본값으로 재설정하는 방법은 무엇입니까? 이것이 작동하지 않기 때문에 :

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

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

참고 URL : https://stackoverflow.com/questions/13988145/how-to-unset-max-height