یہ مضمون HTML میں عملی نفاذ کے ساتھ DOM عنصر 'کلائنٹ ٹاپ' کو ظاہر کرتا ہے۔
HTML میں DOM عنصر 'clientTop' کا استعمال کیسے کریں؟
'کلائنٹ ٹاپ' پراپرٹی ویب پیجز بناتے وقت HTML عناصر کی ترتیب اور پوزیشننگ کے ساتھ کام کرنے کے لیے مفید ہے۔ جس کے بدلے میں جوابی اور متحرک ویب سائٹ لے آؤٹ بنانے میں مدد ملتی ہے۔
مثال
آئیے 'کلائنٹ ٹاپ' پراپرٹی کی بہتر تفہیم کے لیے ایک مثال دیتے ہیں۔ مثال کے طور پر، اوپر کی پوزیشن سے بارڈر کے وزن کا اندازہ اس مثال میں کیا گیا ہے:
< جسم >
< h3 آئی ڈی = 'مثال' > بہتر وضاحت کے لیے Linuxhint کے ذریعے فراہم کردہ مضمون < / h3 >
< / جسم >
سب سے پہلے، اندر ' 'ٹیگ بنائیں ایک' ٹیگ کریں اور اسے کچھ ڈمی ڈیٹا فراہم کریں۔ اس کے علاوہ، ایک آئی ڈی تفویض کریں ' مثال ' اس کے ساتھ.
< انداز >
#مثال {
سرحد : 2px ٹھوس سیاہ؛
پیڈنگ: 10px؛
پس منظر- رنگ : ہلکا بھوری رنگ
}
< / انداز >
اس کے بعد اندر ' 'ٹیگ منتخب کریں' مثال 'id اور' کی قدر مقرر کریں 2px ٹھوس جنگلاتی سبز ' کرنے کے لئے ' سرحد ' جائیداد. اس کے علاوہ، 'کا استعمال کرتے ہوئے کچھ بنیادی اسٹائل لگائیں بھرتی 'اور' پس منظر کا رنگ بہتر تصور کے مقاصد کے لیے خصوصیات۔
اوپر بیان کردہ کوڈ کے نفاذ کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ دکھاتا ہے کہ div اور h3 عناصر بنیادی اسٹائل کے ساتھ ویب صفحہ پر دکھائے جاتے ہیں۔
'کلائنٹ ٹاپ' پراپرٹی استعمال کریں۔
استعمال کرنے کے لیے ' کلائنٹ ٹاپ HTML عنصر پر پراپرٹی، کوڈ کی درج ذیل لائنیں شامل کریں 'ٹیگ۔ اس کوڈ کے ٹکڑوں کی وضاحت ذیل میں کی گئی ہے۔
< سکرپٹ >مثال تھی = document.getElementById ( 'مثال' ) ;
var topHeight = example.clientTop؛
console.log ( 'سب سے اوپر کی سرحد کی اونچائی:' + اوپر کی اونچائی + 'px' ) ;
< / سکرپٹ >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، متغیر ' مثال ” تخلیق کیا جاتا ہے جو معلومات کو ذخیرہ کرتا ہے یا HTML عنصر پر کچھ اعمال کا اطلاق کرتا ہے۔
- اگلا، ' سب سے اوپر کی اونچائی 'متغیر ذخیرہ کرتا ہے' مثال 'متغیر' کے ساتھ کلائنٹ ٹاپ ' جائیداد.
- آخر میں، ظاہر کریں ' سب سے اوپر کی اونچائی کنسول پر متغیر کا استعمال کرتے ہوئے console.log() 'طریقہ.
مندرجہ بالا کوڈ کے ٹکڑوں پر عمل درآمد کے بعد، کنسول اس طرح ظاہر ہوتا ہے:
مندرجہ بالا آؤٹ پٹ واضح کرتا ہے کہ اوپر کی سرحد کی اونچائی/وزن کنسول پر منتخب عناصر کے لیے پکسلز میں ظاہر ہوتا ہے۔
نتیجہ
' کلائنٹ ٹاپ پراپرٹی HTML عناصر کی کل اونچائی کی پیمائش کرتی ہے، بشمول ان کی سرحدیں اور پیڈنگ۔ 'کلائنٹ ٹاپ' پراپرٹی منتخب ایچ ٹی ایم ایل عنصر کے لیے ٹاپ پوزیشن سے بارڈر وزن واپس کرتی ہے جو انٹرایکٹو ویب پیجز بنانے میں مدد کرتی ہے۔ اس مضمون نے دکھایا ہے کہ HTML میں DOM عنصر 'clientTop' سے کیا مراد ہے۔