অফসেটহাইট এবং ক্লায়েন্টহাইটের মধ্যে পার্থক্য

154

জাভাস্ক্রিপ্ট ডোমে - কোনও উপাদানটির অফসেটহাইট এবং ক্লায়েন্টহাইটের মধ্যে পার্থক্য কী?

javascript

— স্টিভ
সূত্র

এখানে একটি ভাল ডেমো উদাহরণ jsfiddle.net/shibualexis/yVhgM/3

— গিব্বোক

উত্তর:

203

ক্লায়েন্টহাইট :

কোনও বস্তুর জন্য দৃশ্যমান ক্ষেত্রের উচ্চতা পিক্সেল এ ফিরে আসে। মানটিতে প্যাডিং সহ উচ্চতা রয়েছে তবে এতে স্ক্রোলবার, সীমানা এবং মার্জিন অন্তর্ভুক্ত নয়।

অফসেটহাইট :

কোনও বস্তুর জন্য দৃশ্যমান ক্ষেত্রের উচ্চতা পিক্সেল এ ফিরে আসে। মানটি প্যাডিং, স্ক্রোলবার এবং সীমান্ত সহ উচ্চতা ধারণ করে তবে মার্জিনটি অন্তর্ভুক্ত করে না।

সুতরাং, offsetHeightস্ক্রোলবার এবং সীমানা অন্তর্ভুক্ত, clientHeightনা।

— ওবেদের
সূত্র

আর একটি জিনিস আমি লক্ষ্য করেছি যে ক্লায়েন্টহাইট অফসেটহাইটের চেয়ে অনেক দ্রুত। আপনি কেন কোন ধারণা আছে?

— disc0dancer

@ disc0dancer - সম্ভবত ব্রাউজারটি ইতিমধ্যে clientSizeসহজেই উপলব্ধ (কারণ সর্বোপরি এটি ভিউপোর্ট), তবে offsetHeightপুরো ডকুমেন্টটি রিফ্লো করার পরে গণনা করা দরকার?

— ওডে

ওয়েল ওয়েবকিট ইন্সপেক্টর বলেছেন যে ক্লায়েন্টহেই জিজ্ঞাসা করার পরেও পুরো ডকুমেন্টে রিফ্লোগুলি রয়েছে।

— disc0dancer

@ disc0dancer - আমার অনুমানের জন্য অনেক কিছু। তবে এটি একটি বাস্তবায়ন জিনিস - নিশ্চিত নয় যে সমস্ত ব্রাউজারগুলি সে রকম।

— ওডে

ওবেদ থেকে উত্তরটি থিয়োরি। তবে তত্ত্ব এবং বাস্তবতা সর্বদা এক নয়, কমপক্ষে <বিডিওয়াই> বা <এইচটিএমএল> উপাদানগুলির জন্য নয় যা জাভাস্ক্রিপ্টে স্ক্রোলিং অপারেশনের জন্য গুরুত্বপূর্ণ হতে পারে।

মাইক্রোসফ্টের এমএসডিএন- তে একটি দুর্দান্ত চিত্র রয়েছে :

ক্লায়েন্টহাইট, অফসেটহাইট, স্ক্রোলহাইট

যদি আপনার এইচটিএমএল পৃষ্ঠা থাকে যা উল্লম্ব স্ক্রোলবারটি দেখায় তবে এটি আশা করতে পারে যে <বিডিওয়াই> বা <এইচটিএমএল> উপাদানটির যে কোনও একটি এই স্ক্রোলটির চেয়ে অফসেটহাইটের চেয়ে স্ক্রোলহাইট জীটার রয়েছে। এটি ইন্টারনেট এক্সপ্লোরারের সমস্ত পুরানো সংস্করণের ক্ষেত্রে সত্য।

তবে এটি ইন্টারনেট এক্সপ্লোরার 11 এর ক্ষেত্রে সত্য নয় এবং ফায়ারফক্স ৩ 36 এর ক্ষেত্রেও নয় least কমপক্ষে এই ব্রাউজারগুলিতে অফসেটহাইট প্রায় স্ক্রোলহাইটের মতোই যা ভুল।

এবং অফসেটহাইটটি ভুল হতে পারে, ক্লায়েন্টহাইট সর্বদা সঠিক।

বিভিন্ন ব্রাউজারে নিম্নলিখিত কোড ব্যবহার করে দেখুন এবং আপনি দেখতে পাবেন:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

পুরানো ইন্টারনেট এক্সপ্লোরার সঠিকভাবে দেখায়:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার 11 এর আউটপুটটি হ'ল:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

যা পরিষ্কারভাবে দেখায় যে অফসেটহাইট এখানে ভুল। অফসেটহাইট এবং ক্লায়েন্টহাইটের মাত্র কয়েকটি পিক্সেল পৃথক হওয়া বা একই হওয়া উচিত।

অনুগ্রহ করে নোট করুন যে ক্লায়েন্টহাইট এবং অফসেটহাইটটি এমন উপাদানগুলির জন্যও পৃথক হতে পারে যা দৃশ্যমান নয় উদাহরণস্বরূপ একটি <FORM> যেখানে অফসেটহাইট ফর্মের আসল আকার হতে পারে যখন ক্লায়েন্টহাইট শূন্য হতে পারে।

— Elmue
সূত্র