এই ব্লগটি DOM উপাদানের ব্যবহার প্রদর্শন করে ক্লায়েন্ট উচ্চতা HTML এ
কিভাবে HTML এ DOM এলিমেন্ট “clientHeight” ব্যবহার করবেন?
দ্য ' ক্লায়েন্ট উচ্চতা ” সম্পত্তি বিকাশকারীদের একটি উপাদানের দৃশ্যমান বিষয়বস্তুর উচ্চতা গণনা করতে দেয়। এটি একে অপরের সাথে সম্পর্কিত উপাদানগুলির অবস্থান নির্ধারণে বা ব্যবহারকারী একটি স্ক্রোলযোগ্য ধারকটির ডান প্রান্তে স্ক্রোল করেছে কিনা তা নির্ধারণ করতে সহায়তা করে। এটি ওয়েবপৃষ্ঠার অবশিষ্ট অব্যবহৃত স্থান সম্পর্কে তথ্য প্রদান করে।
উদাহরণ
আসুন 'ক্লায়েন্ট হাইট' সম্পত্তির আরও ভাল প্রদর্শনের জন্য একটি উদাহরণ দিয়ে হাঁটা যাক। উদাহরণস্বরূপ, ' অনক্লিক 'ইভেন্ট শ্রোতা' দ্বারা প্রদত্ত ফলাফল প্রদর্শন করতে ব্যবহার করা হয় ক্লায়েন্ট উচ্চতা 'সম্পত্তি:
< শরীর >
< h2 আইডি = 'উপাদান' < / h2 >
< h2 আইডি = 'উপাদান' অনক্লিক = 'শোভালমেন্ট উচ্চতা()' >
উচ্চতা দেখানোর জন্য LinuxHint নিবন্ধে ক্লিক করুন!
< / h2 >
< লিপি >
ফাংশন showelementHeight() {
var উদাহরণ = document.getElementById('element');
var elementHeight= example.clientHeight;
সতর্কতা ('উচ্চতা হল:' + elementHeight + 'পিক্সেল।');
}
< / লিপি > >
< / শরীর >
উপরের কোড স্নিপেটের ব্যাখ্যা নীচে বর্ণিত হয়েছে:
- প্রাথমিকভাবে, একটি তৈরি করুন ' 'এর ভিতরে ট্যাগ করুন' ” ট্যাগ করুন এবং এটিতে কিছু ডামি ডেটা সরবরাহ করুন। এছাড়াও, 'এর একটি আইডি বরাদ্দ করুন উপাদান 'নির্বাচিত HTML উপাদানে।
- এরপরে, একটি যোগ করুন ' অনক্লিক() 'ইভেন্ট শ্রোতা যা আহ্বান করে' প্রদর্শনী উচ্চতা() ' ফাংশন যখন ব্যবহারকারী ক্লিক করে ' ' উপাদান।
- তারপর, ভিতরে ' প্রদর্শনী উচ্চতা() ' ফাংশন ' নামে একটি ভেরিয়েবল তৈরি করে উদাহরণ যা HTML এলিমেন্টের উদাহরণ হিসেবে কাজ করে যার একটি আইডি আছে উপাদান ”
- এরপর, “নামক আরেকটি ভেরিয়েবল তৈরি করুন। উপাদান উচ্চতা '' যা 'ক্লায়েন্ট হাইট' সম্পত্তি দ্বারা প্রদত্ত ফলাফল সংরক্ষণ করে।
- এর পরে, প্রদর্শন করুন ' উপাদান উচ্চতা '' ব্যবহার করে সতর্কতা বাক্সে ভেরিয়েবল সতর্কতা() 'পদ্ধতি।
শেষ পর্যন্ত, 'স্টাইল করার জন্য নিম্নলিখিত CSS বৈশিষ্ট্যগুলি যোগ করুন h2 'উপাদান:
< শৈলী >
#উপাদান {
মার্জিন: 20px;
প্যাডিং: 10px;
পটভূমি- রঙ : অন্ধকারাচ্ছন্ন;
উচ্চতা : 300px;
পাঠ্য- সারিবদ্ধ : কেন্দ্র;
লাইন- উচ্চতা : 100px;
}
< / শৈলী >
উপরের কোড স্নিপেটে, নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি “আইডি সহ ডিভিতে বরাদ্দ করা হয়েছে উপাদান ”:
- দ্য ' 20px ', ' 10px ' এবং ' অন্ধকার 'মান CSS এ প্রদান করা হয়' মার্জিন ', ' প্যাডিং ' এবং ' পেছনের রং ” বৈশিষ্ট্য, যথাক্রমে।
- এছাড়াও ব্যবহার করে ' উচ্চতা ', ' পাঠ্য-সারিবদ্ধ ' এবং ' লাইনের উচ্চতা ” ব্যবহারকারীর দৃশ্যমানতা বাড়াতে CSS বৈশিষ্ট্য।
উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
আউটপুট প্রদর্শন করে যে নির্বাচিত উপাদানটির উচ্চতা সতর্কতা বাক্সে প্রদর্শিত হয়, যখনই ব্যবহারকারী উপাদানটিতে ক্লিক করেন।
উপসংহার
ব্যবহার করতে ' ক্লায়েন্ট উচ্চতা ” HTML এ প্রপার্টি, আইডি অ্যাট্রিবিউট অ্যাক্সেস করে এইচটিএমএল উপাদান নির্বাচন করুন। এর পরে, 'ক্লায়েন্ট হাইট' বৈশিষ্ট্য সংযুক্ত করুন এবং ফলাফল প্রদর্শন করুন। এটি একটি শুধুমাত্র পঠনযোগ্য সম্পত্তি এবং পিক্সেলে ফলাফল প্রদান করে। “clientHeight” প্রপার্টি “