अधिकतम-ऊँचाई को कैसे अनसेट करें?

161

max-heightयदि मैंने पहले से ही कुछ सीएसएस नियम में सेट किया है, तो मैं संपत्ति को उसके डिफ़ॉल्ट पर कैसे रीसेट कर सकता हूं ? यह काम नहीं करता है:

pre {
  max-height: 250px;
}

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

css

— BiAiB
स्रोत

306

इसे रीसेट करें none:

pre {
  max-height: 250px;
}

pre.doNotLimitHeight {
  max-height: none;
}

संदर्भ

— मदारा का भूत
स्रोत

बस ध्यान दें कि यह काम नहीं करता है min-height( noneइसकी अनुमति नहीं है और मूल्य में परिणाम ओवरराइड नहीं किया जा रहा है)।

— जॉन

1

@ जो सही है, के लिए डिफ़ॉल्ट मान min-height0 है, लेकिन चूंकि "इन्फिनिटी" सीएसएस में कोई बात नहीं है, इसलिए max-heightचूक होती है none।

— मदारा का भूत

24

आप निम्नलिखित सीएसएस का उपयोग करके अधिकतम-ऊंचाई विशेषता को साफ़ कर सकते हैं:

max-height:none;

— mr_lewjam
स्रोत

3

बस एक नोट, यदि आप जावास्क्रिप्ट का उपयोग कर रहे हैं तो तत्व $el.style.maxHeight = '50px';का उपयोग करें जैसे $el.style.maxHeight = 'none';"रीसेट" या "हटाएं" 50pxनहीं होगा, यह बस इसे ओवरराइड करेगा। इसका मतलब यह है कि यदि आप किसी तत्व की अधिकतम ऊंचाई को "रीसेट" करने का प्रयास करते हैं, तो यह तत्व की संपत्ति पर मूल्य $el.style.maxHeight = 'none';लागू करेगा , जो उस तत्व से मेल खाने वाले सीएसएस चयन नियमों में किसी भी अन्य वैध गुणों को ओवरराइड करता है।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 प्रतिनिधि नहीं हैं इसलिए मैं टिप्पणी नहीं कर सकता।

चीयर्स।

— Jexah
स्रोत

1

या तो उपयोग करें

max-height: none;

या

max-height: 100%;

ध्यान दें : दूसरा ब्लॉक वाले ब्लॉक की ऊंचाई के सापेक्ष है।

— thiagowfx
स्रोत

1

क्षमा करें, लेकिन यह गलत है, अधिकतम ऊंचाई निर्धारित करना: 100% युक्त ब्लॉक की ऊंचाई के सापेक्ष है। तो यह वास्तविक अधिकतम ऊंचाई को सीमित करता है।

— BiAiB

1

आप उपयोग कर सकते हैं

max-height: unset;

यदि आप किसी संपत्ति को उसके मूल मूल्य पर रीसेट करते हैं, यदि आप उसके माता-पिता से विरासत में प्राप्त कर रहे हैं (वह कीवर्ड उत्तराधिकार के रूप में काम करेगा) और यदि आप विरासत में नहीं ले रहे हैं, तो वह उसके प्रारंभिक मूल्य (कीवर्ड प्रारंभिक के रूप में काम करेगा) के लिए रीसेट हो जाएगा।

— अवधूत थोरट
स्रोत