[css] 최대 높이를 설정 해제하는 방법?
max-height
CSS 규칙에서 이전에 설정 한 경우 속성을 기본값으로 재설정하는 방법 은 무엇입니까? 작동하지 않습니다.
pre {
max-height: 250px;
}
pre.doNotLimitHeight {
max-height: auto; // Doesn't work at least in Chrome
}
답변
답변
다음 CSS를 사용하여 max-height 속성을 지울 수 있습니다.
max-height:none;
답변
당신처럼 스타일 요소를 자바 스크립트를 사용하는 경우 그냥 참고 $el.style.maxHeight = '50px';
사용 $el.style.maxHeight = 'none';
“재설정”하지 않습니다 또는 “제거”를 50px
, 단순히 그것보다 우선합니다. 즉, 요소를 사용하여 요소의 최대 높이를 “재설정”하려고하면 요소 의 속성에 값을 $el.style.maxHeight = 'none';
적용하여 해당 요소와 일치하는 CSS 선택 규칙의 다른 유효한 속성을 재정의합니다 .none
max-height
max-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;
이 속성은 부모로부터 상속하는 경우 속성을 상속 된 값으로 재설정하고 (키워드 상속으로 작동) 상속하지 않는 경우 속성을 초기 값으로 재설정합니다 (키워드 초기 값으로 작동).