จะยกเลิกการตั้งค่าความสูงสูงสุดได้อย่างไร

ฉันจะรีเซ็ต max-heightคุณสมบัติเป็นค่าเริ่มต้นได้อย่างไรหากก่อนหน้านี้ตั้งค่าไว้ในกฎ CSS บางตัว สิ่งนี้ใช้ไม่ได้:

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:none; 

เพียงบันทึกถ้าคุณใช้จาวาสคริปต์ในการจัดองค์ประกอบเช่นการ$el.style.maxHeight = '50px';ใช้$el.style.maxHeight = 'none';จะไม่ "รีเซ็ต" หรือ "ลบ" the 50pxมันจะแทนที่มัน ซึ่งหมายความว่าหากคุณพยายามที่จะ "รีเซ็ต" ความสูงสูงสุดขององค์ประกอบที่ใช้$el.style.maxHeight = 'none';มันจะใช้noneค่ากับmax-heightคุณสมบัติขององค์ประกอบการแทนที่max-heightคุณสมบัติที่ถูกต้องอื่น ๆในกฎการเลือก CSS ที่ตรงกับองค์ประกอบนั้น

ตัวอย่าง:

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;

ซึ่งจะรีเซ็ตคุณสมบัติเป็นค่าที่สืบทอดหากคุณกำลังสืบทอดจากพาเรนต์ (จะทำงานเป็นคำหลักสืบทอด) และในกรณีที่คุณไม่ได้รับมรดกจะรีเซ็ตเป็นค่าเริ่มต้น (จะทำงานเป็นคำหลักเริ่มต้น)