जावास्क्रिप्ट तत्व ऊंचाई प्राप्त करें

| | | | | | | | | | | | | | | | | | | |

वेब पेज डिजाइन करते समय, आप शायद वेब पेज पर दिखाई देने वाले तत्वों के लिए विशिष्ट आयाम निर्दिष्ट करना चाहेंगे। उदाहरण के लिए, हो सकता है कि आप किसी बॉक्स में एक निश्चित ऊँचाई या टेक्स्ट की एक पंक्ति को एक निश्चित चौड़ाई तक विस्तारित करना चाहते हों।

वह जगह है जहाँ CSS ऊँचाई और चौड़ाई गुण काम में आते हैं। सीएसएस में ऊंचाई और चौड़ाई के गुणों का उपयोग किसी तत्व की ऊंचाई और चौड़ाई को परिभाषित करने के लिए किया जाता है।

यह ट्यूटोरियल उदाहरणों के साथ, सीएसएस ऊंचाई और चौड़ाई गुणों की मूल बातें और न्यूनतम और अधिकतम ऊंचाई का उपयोग करने के तरीके पर चर्चा करेगा। और उत्तरदायी तत्वों को डिजाइन करने के लिए चौड़ाई गुण। इस ट्यूटोरियल के अंत तक, आप वेब पेज पर एक तत्व के आकार को सेट करने के लिए सीएसएस ऊंचाई और चौड़ाई गुणों का उपयोग करने में अच्छी तरह से वाकिफ होंगे।

सीएसएस ऊंचाई और चौड़ाई

समायोजन वेब पेज पर किसी तत्व की ऊंचाई और चौड़ाई आपको उस स्थान को परिभाषित करने की अनुमति देती है जो तत्व वेब पेज पर कब्जा करेगा। यह आपके वेब पेज के तत्वों के लिए एक संरचना विकसित करने में आपकी मदद कर सकता है ताकि प्रत्येक तत्व आपकी आवश्यकताओं के अनुसार सही ढंग से दिखाई दे।

यह परिभाषित करने के लिए कि कोई तत्व क्षैतिज और लंबवत रूप से कितनी दूर तक विस्तारित हो सकता है, आप चौड़ाई का उपयोग कर सकते हैं और ऊंचाई गुण, क्रमशः।

चौड़ाई और ऊंचाई गुण आपको एक बॉक्स के सामग्री क्षेत्र के लिए एक विशिष्ट चौड़ाई और ऊंचाई निर्धारित करने की अनुमति देते हैं। इसका मतलब यह है कि चौड़ाई और ऊंचाई के गुण बॉक्स में मौजूद स्थान की मात्रा को नियंत्रित करते हैं और किसी बॉक्स के लिए मार्जिन या पैडिंग के सेट को प्रभावित नहीं करते हैं

ऊंचाई और चौड़ाई के गुण निम्नलिखित सिंटैक्स का उपयोग करते हैं:.

p>

HeightValue और widthValue निम्नलिखित में से कोई भी मान स्वीकार कर सकता है:

  • स्वतः: ब्राउज़र स्वचालित रूप से ऊंचाई और चौड़ाई की गणना करता है
  • लंबाई:। px, em, rem, आदि में एक फ्रेम की चौड़ाई या ऊंचाई।
  • प्रतिशत: एक बॉक्स की चौड़ाई या ऊंचाई ब्लॉक के आकार के प्रतिशत के रूप में जिसमें एक प्रारंभिक
  • < ली>तत्व प्रकट होता है:।
  • विरासत: बॉक्स के लिए निर्दिष्ट डिफ़ॉल्ट मान। बॉक्स की चौड़ाई या ऊंचाई के समान मान जिसमें कोई तत्व दिखाई देता है

अब जब हम ऊंचाई और चौड़ाई के गुणों की मूल बातें जानते हैं, तो हम इनमें से प्रत्येक का एक उदाहरण तलाश सकते हैं प्रोपर्टीज इन एक्शन।

CSS की ऊंचाई और चौड़ाई

मान लीजिए कि हम द पिकल्ड एप्पल नामक एक स्थानीय कैफे के लिए एक वेबसाइट डिजाइन कर रहे हैं। इस कैफे ने हमें उनके "अबाउट" पर एक बॉक्स बनाने के लिए कहा। वेबसाइट, जिसमें कैफ़े का संक्षिप्त विवरण होना चाहिए।

यह क्षेत्र 200px चौड़ा और 200px ऊँचा होना चाहिए और इसकी पृष्ठभूमि हल्के भूरे रंग की होनी चाहिए। इन आयामों को यह सुनिश्चित करने के लिए चुना गया था कि अन्य तत्व जिन्हें हम जोड़ना चाहते हैं जब हम उन्हें लागू करते हैं तो वेब पेज आकार के लिए।

हम बॉक्स बनाने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:.

क्लिक करें बटन की छवि

आइए हमारे कोड का विश्लेषण करें .. अपनी HTML फ़ाइल में, हमने < का उपयोग करके टेक्स्ट का एक पैराग्राफ बनाया है। पी> टैग। इस

टैग का वर्ग नाम अबाउटबॉक्स है, जिसका उपयोग हम अपनी CSS फ़ाइल में टेक्स्ट पैराग्राफ़ को स्टाइल करने के लिए करते हैं।

हमारी CSS फ़ाइल में, हमने एक स्टाइल नियम परिभाषित किया है जो कि अबाउटबॉक्स वर्ग नाम वाले किसी भी तत्व पर लागू होता है। यह शैली नियम किसी तत्व की ऊंचाई 200px, तत्व की चौड़ाई 200px पर सेट करता है, और किसी तत्व की पृष्ठभूमि का रंग हल्का भूरा सेट करता है।

यदि हम चाहते हैं कि हमारा तत्व 100px चौड़ा हो। हमें 100px के बराबर चौड़ाई वाली संपत्ति को बदलने की आवश्यकता है। या, यदि हम चाहते हैं कि हमारा तत्व 300px ऊँचा हो, तो हम ऊँचाई गुण को बराबर 300px में बदल सकते हैं

CSS के गुण न्यूनतम और अधिकतम लंबाई

चौड़ाई और ऊंचाई निश्चित मान हैं। इसका मतलब यह है कि निर्दिष्ट चौड़ाई और ऊंचाई समान रहती है और यदि आप विंडो का आकार बदलते हैं या किसी अन्य डिवाइस पर वेबपेज देखते हैं तो यह नहीं बदलेगा (जब तक कि आप ऊंचाई सापेक्ष मान का उपयोग नहीं करते हैं, उदाहरण के लिए मूल तत्व के आकार का प्रतिशत)।

इसे समझना महत्वपूर्ण है क्योंकि यदि आप एक सुलभ अनुभव डिजाइन करना चाहते हैं, तो तत्वों के लिए विशिष्ट ऊंचाई और चौड़ाई निर्धारित करना व्यावहारिक नहीं हो सकता है। उदाहरण के लिए, यदि आप छवि की चौड़ाई 500px निर्दिष्ट करते हैं, तो हो सकता है कि यदि कोई उपयोगकर्ता साइट को मोबाइल डिवाइस पर देखता है, तो चित्र ठीक से प्रस्तुत नहीं हो सकता है, स्क्रीन का आकार छोटा हो सकता है।

वह स्थान है जहां न्यूनतम और अधिकतम लंबाई मान .

किसी तत्व को स्क्रीन और विंडो आयामों के अनुकूल बनाने के लिए, आप न्यूनतम चौड़ाई, m ax चौड़ाई, न्यूनतम-ऊंचाई और अधिकतम-ऊंचाई गुणों का उपयोग कर सकते हैं। जब आप इन गुणों को निर्दिष्ट करते हैं, तो चौड़ाई और ऊंचाई के लिए निर्दिष्ट मान ओवरराइड हो जाएंगे।

न्यूनतम-ऊंचाई संपत्ति संपत्ति की न्यूनतम ऊंचाई को परिभाषित करती है। यदि न्यूनतम ऊंचाई निर्दिष्ट है, तो तत्व की ऊंचाई न्यूनतम ऊंचाई मान से कम नहीं हो सकती है। न्यूनतम-चौड़ाई वाली संपत्ति संपत्ति की न्यूनतम चौड़ाई को परिभाषित करती है और उसी तरह काम करती है। क्रमशः।

आइए पहले के अपने कॉफी उदाहरण पर वापस चलते हैं। मान लीजिए हम उपयोगकर्ता के स्क्रीन आकार के आधार पर अपने बॉक्स की चौड़ाई बदलना चाहते हैं। बॉक्स की अधिकतम चौड़ाई 500px होनी चाहिए और हमारा बॉक्स कभी भी 100px से छोटा नहीं होना चाहिए। हम निम्नलिखित कोड का उपयोग करके ऐसा कर सकते हैं:

क्लिक करें बटन की छवि

आइए हमारे कोड का विश्लेषण करें और चैट करें। यह काम किस प्रकार करता है। हमारी HTML फ़ाइल में, हमने

टैग के बीच टेक्स्ट का एक पैराग्राफ निर्दिष्ट किया है जिसमें हमारे पहले उदाहरण के समान टेक्स्ट है। इस पाठ अनुच्छेद से जुड़े वर्ग का नाम अबाउटबॉक्स है।

हमारी CSS फ़ाइल में, हमने अबाउटबॉक्स वर्ग से संबद्ध तीन गुण निर्दिष्ट किए हैं। p>

संपत्ति की चौड़ाई अधिकतम- 500px पर सेट है, जिसका अर्थ है कि अधिकतम बॉक्स चौड़ाई 500px है। न्यूनतम चौड़ाई गुण 100px पर सेट है, जिसका अर्थ है कि बॉक्स कभी भी 100px से छोटा नहीं दिखाई देगा, चाहे उपयोगकर्ता किसी भी डिवाइस पर साइट देख रहा हो। बैकग्राउंड-कलर प्रॉपर्टी लाइटग्रे पर सेट है, जो हमारे बॉक्स के बैकग्राउंड कलर को लाइट ग्रे पर सेट करती है।

ब्राउज़र के आकार के आधार पर इस क्षेत्र का आकार बदलता है। इसलिए यदि आप अपनी ब्राउज़र विंडो को छोटा बनाते हैं , बॉक्स का आकार तदनुसार बदल जाएगा। हालांकि, आपकी ब्राउज़र विंडो कितनी भी बड़ी दिखाई दे,

टैग की चौड़ाई कभी भी 500px से अधिक नहीं होगी।

निष्कर्ष

द सीएसएस ऊंचाई और चौड़ाई संपत्ति यह आपको वेब पेज पर किसी तत्व की ऊंचाई और चौड़ाई को परिभाषित करने की अनुमति देता है।

हालांकि, ये गुण किसी तत्व की ऊंचाई और चौड़ाई के लिए एक निश्चित मान निर्धारित करते हैं। यदि आप ब्राउज़र विंडो के आकार के आधार पर बॉक्स का आकार बदलना चाहते हैं, तो आप न्यूनतम ऊंचाई, न्यूनतम-चौड़ाई, अधिकतम-ऊंचाई और अधिकतम-चौड़ाई गुणों का उपयोग कर सकते हैं।

इस ट्यूटोरियल में चर्चा की गई है , उदाहरणों का जिक्र करते हुए, सीएसएस में ऊंचाई और चौड़ाई की मूल बातें, ऊंचाई और चौड़ाई गुणों का उपयोग कैसे करें, और वेब पेज के एक तत्व के आकार को परिभाषित करने के लिए अधिकतम ऊंचाई और चौड़ाई और न्यूनतम मिलान गुणों का उपयोग कैसे करें। अब आप तैयार हैं एक विशेषज्ञ की तरह ऊंचाई और चौड़ाई के गुणों का उपयोग शुरू करने के लिए!