یہ بلاگ DOM عنصر کے استعمال کو ظاہر کرتا ہے۔ کلائنٹ کی اونچائی HTML میں
HTML میں DOM عنصر 'clientHeight' کا استعمال کیسے کریں؟
' کلائنٹ کی اونچائی پراپرٹی ڈویلپرز کو کسی عنصر کے نظر آنے والے مواد کی اونچائی کا حساب لگانے کی اجازت دیتی ہے۔ یہ ایک دوسرے سے متعلق عناصر کی پوزیشننگ میں یا اس بات کا تعین کرنے میں مدد کرتا ہے کہ آیا صارف نے سکرول کے قابل کنٹینر کے دائیں کنارے تک اسکرول کیا ہے۔ یہ ویب پیج پر باقی غیر استعمال شدہ جگہ کے بارے میں بھی معلومات فراہم کرتا ہے۔
مثال
آئیے 'کلائنٹ ہائٹ' پراپرٹی کے بہتر مظاہرے کے لیے ایک مثال پر چلتے ہیں۔ مثال کے طور پر، ' کلک پر 'ایونٹ سننے والے کا استعمال اس کے ذریعہ فراہم کردہ نتیجہ ظاہر کرنے کے لئے کیا جاتا ہے' کلائنٹ کی اونچائی جائیداد:
< جسم >
< h2 آئی ڈی = 'عنصر' >< / h2 >
< h2 آئی ڈی = 'عنصر' کلک پر = 'showelementHeight()' >
اونچائی دکھانے کے لیے لینکس ہنٹ آرٹیکل پر کلک کریں!
< / h2 >
< سکرپٹ >
فنکشن showelementHeight() {
var مثال = document.getElementById('عنصر')؛
var elementHeight = example.clientHeight؛
الرٹ ('اونچائی ہے:' + elementHeight + ' پکسلز۔')؛
}
< / سکرپٹ > >
< / جسم >
مندرجہ بالا کوڈ کے ٹکڑوں کی وضاحت ذیل میں بیان کی گئی ہے:
- ابتدائی طور پر، ایک بنائیں ' 'اندر ٹیگ' ٹیگ کریں اور اسے کچھ ڈمی ڈیٹا فراہم کریں۔ اس کے علاوہ، ایک آئی ڈی تفویض کریں ' عنصر منتخب کردہ HTML عنصر پر۔
- اگلا، ایک شامل کریں ' کلک پر() 'واقعہ سننے والا جو دعوت دیتا ہے' نمائش کی اونچائی () ' فنکشن جب صارف ' پر کلک کرتا ہے ' عنصر.
- پھر، اندر ' نمائش کی اونچائی () فنکشن ایک متغیر بناتا ہے جس کا نام ہے مثال 'جو HTML عنصر کی مثال کے طور پر کام کرتا ہے جس کی ایک id ہے' عنصر '
- اگلا، ایک اور متغیر بنائیں جس کا نام ہے ' عنصر کی اونچائی ’’ جو 'کلائنٹ ہائٹ' پراپرٹی کے ذریعہ فراہم کردہ نتیجہ کو اسٹور کرتا ہے۔
- اس کے بعد، ظاہر کریں ' عنصر کی اونچائی 'متغیر' کا استعمال کرتے ہوئے الرٹ باکس پر الرٹ() 'طریقہ.
آخر میں، اسٹائل کرنے کے لیے درج ذیل سی ایس ایس خصوصیات شامل کریں۔ h2 عنصر:
< انداز >
#عنصر {
مارجن: 20px؛
پیڈنگ: 10px؛
پس منظر- رنگ : گہرا رنگ
اونچائی : 300px;
متن- سیدھ میں لانا : مرکز
لائن- اونچائی : 100px;
}
< / انداز >
مندرجہ بالا کوڈ کے ٹکڑوں میں، درج ذیل سی ایس ایس کی خصوصیات اس div کو تفویض کی گئی ہیں جن کی ایک id ہے “ عنصر ”:
- ' 20px '،' 10px 'اور' گہرا رنگ ' اقدار CSS کو فراہم کی جاتی ہیں ' مارجن '،' بھرتی 'اور' پس منظر کا رنگ 'خصوصیات، بالترتیب.
- بھی استعمال کرتا ہے ' اونچائی '،' متن سیدھ 'اور' لکیر کی اونچائی صارف کی مرئیت کو بڑھانے کے لیے سی ایس ایس کی خصوصیات۔
مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ ظاہر کرتا ہے کہ منتخب عنصر کی اونچائی الرٹ باکس میں ظاہر ہوتی ہے، جب بھی صارف عنصر پر کلک کرتا ہے۔
نتیجہ
استعمال کرنے کے لیے ' کلائنٹ کی اونچائی HTML میں پراپرٹی، id انتساب تک رسائی حاصل کرکے HTML عنصر کو منتخب کریں۔ اس کے بعد، 'clientHeight' پراپرٹی کو منسلک کریں اور نتیجہ ڈسپلے کریں۔ یہ صرف پڑھنے کی خاصیت ہے اور نتیجہ پکسلز میں لوٹاتا ہے۔ 'clientHeight' پراپرٹی '