Làm thế nào để bỏ đặt chiều cao tối đa?

Làm cách nào để đặt lại thuộc max-heighttính về mặc định, nếu trước đó nó đã được đặt trong một số quy tắc CSS? Điều này không hoạt động:

pre {
  max-height: 250px;
}

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

Đặt lại thành none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

Tài liệu tham khảo

Bạn có thể xóa thuộc tính chiều cao tối đa bằng cách sử dụng css sau:

max-height:none; 

Chỉ cần một lưu ý, nếu bạn đang sử dụng JavaScript để định kiểu phần tử như $el.style.maxHeight = '50px';sử dụng $el.style.maxHeight = 'none';sẽ không "đặt lại" hoặc "xóa" 50px, nó sẽ chỉ ghi đè lên phần tử đó. Điều này có nghĩa là nếu bạn cố gắng "đặt lại" chiều cao tối đa của một phần tử bằng cách sử dụng $el.style.maxHeight = 'none';nó sẽ áp dụng nonegiá trị cho thuộc max-heighttính của phần tử, ghi đè bất kỳ giá trị nào khácmax-height thuộc tính trong quy tắc chọn CSS phù hợp với phần tử đó.

Một ví dụ:

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

Để thực sự "bỏ đặt" một kiểu nội tuyến, bạn nên sử dụng $el.style.removeProperty('max-height'); .

Để hoàn thành quy tắc này cho toàn bộ quy tắc kiểu và không chỉ một phần tử, trước tiên bạn nên tìm quy tắc bạn muốn sửa đổi, sau đó gọi removePropertyhàm theo quy tắc đó:

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

Bạn có thể tìm thấy StyleSheetvàCssRule các đối tượng theo cách bạn muốn, nhưng đối với một ứng dụng đơn giản, tôi chắc chắn những điều trên sẽ đủ.

Xin lỗi vì đã đặt câu hỏi này làm câu trả lời, nhưng tôi không có 50 đại diện nên tôi không thể nhận xét.

Chúc mừng.

Sử dụng

max-height: none;

hoặc là

max-height: 100%;

Lưu ý : khối thứ hai liên quan đến chiều cao của khối chứa.

Bạn có thể dùng

max-height: unset;

mà đặt lại một thuộc tính thành giá trị được thừa kế của nó nếu bạn đang thừa kế từ cha mẹ của nó (sẽ hoạt động như kế thừa từ khóa) và trong trường hợp bạn không kế thừa nó sẽ đặt lại giá trị ban đầu của nó (sẽ hoạt động như từ khóa ban đầu).