তাহলে কি এই উত্তর?
"আপনার যদি কিছু গণনা করার প্রয়োজন হয় তবে এটি না দেখানো হয় তবে এটিকে উপাদানটি সেট করুন visibility:hiddenএবং position:absoluteএটি ডিওএম গাছের সাথে যুক্ত করুন, অফসেটহাইটটি পাবেন এবং এটিকে সরিয়ে দিন ((প্রোটোটাইপ লাইব্রেরি শেষবার যখন আমি পরীক্ষা করেছিলাম লাইনের পিছনে এটি করে)"
বেশ কয়েকটি উপাদান নিয়ে আমার একই সমস্যা। সাইটে কোনও jQuery বা প্রোটোটাইপ ব্যবহার করার দরকার নেই তবে আমি যদি প্রযুক্তিটি কাজ করে তবে তা ধার করার পক্ষে all কাজ করতে ব্যর্থ কিছু জিনিসগুলির উদাহরণ হিসাবে, যা করেছিল তা অনুসরণ করে আমার কাছে নিম্নলিখিত কোড রয়েছে:
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
যা মূলত যা কিছু এবং সবকিছুই কেবল একটি শূন্য ফলাফল পেতে চেষ্টা করে। ক্লায়েন্টহাইট কোনও প্রভাব ছাড়াই। সমস্যার উপাদানগুলির সাথে আমি সাধারণত বেসে NAN এবং অফসেট এবং স্ক্রোল হাইটে শূন্য পাই। তারপরে আমি অ্যাড ডোম সমাধান এবং ক্লায়েন্টরেক্টগুলি চেষ্টা করেছিলাম এটি এখানে কাজ করে কিনা তা দেখার জন্য।
২৯ শে জুন ২০১১, আমি প্রত্যাশার চেয়ে ভাল ফলাফলের সাথে ডম এবং ক্লায়েন্টহাইট উভয়কেই যুক্ত করার চেষ্টা করে কোডটি আপডেট করেছি।
1) ক্লায়েন্টহাইটও ছিল 0
2) ডম আসলে আমাকে একটি উচ্চতা দিয়েছে যা দুর্দান্ত ছিল।
3) ক্লায়েন্টরেক্টস একটি ফলাফলটি ডিওএম কৌশলের সাথে প্রায় সমান।
কারণ যুক্ত উপাদানগুলি প্রকৃতিতে তরল হয়, যখন সেগুলি অন্যথায় ফাঁকা DOM টেম্প উপাদানগুলিতে যুক্ত করা হয় তখন সেগুলি ধারকটির প্রস্থ অনুসারে রেন্ডার করা হয়। এটি অদ্ভুত আকার ধারণ করে, কারণ এটি শেষের চেয়ে 30px খাটো।
উচ্চতা কীভাবে আলাদাভাবে গণনা করা হয় তা চিত্রিত করার জন্য আমি কয়েকটি স্ন্যাপশট যুক্ত করেছি।
উচ্চতা পার্থক্য সুস্পষ্ট। আমি অবশ্যই নিখুঁত অবস্থান এবং লুকানো যুক্ত করতে পারি তবে আমি নিশ্চিত যে এর কোনও প্রভাব থাকবে না। আমি দৃ be় বিশ্বাস অবিরত এই কাজ করবে না!
(আমি আরও খনন করি) সত্য রেন্ডার করা উচ্চতার চেয়ে উচ্চতা কম হয় (রেন্ডার করে)। এটি বিদ্যমান পিতামাতার সাথে মেলে ডিওএম টেম্প উপাদানটির প্রস্থ নির্ধারণ করে সম্বোধন করা যেতে পারে এবং তত্ত্বের ক্ষেত্রে নিখুঁতভাবে সঠিকভাবে সম্পন্ন করা যেতে পারে। এগুলি সরিয়ে এবং তাদের বিদ্যমান অবস্থানে পুনরায় যুক্ত করে কী হবে তা আমি জানি না। যখন তারা একটি অভ্যন্তরীণ এইচটিএমএল কৌশলটি পেয়েছে তখন আমি এই ভিন্ন পদ্ধতির ব্যবহারটি দেখব।
* যাইহোক * এর কোনওটিই প্রয়োজনীয় ছিল না। আসলে এটি বিজ্ঞাপন হিসাবে কাজ করেছিল এবং সঠিক উচ্চতা ফিরিয়ে দিয়েছে !!!
আমি যখন মেনুগুলিকে আবার দৃশ্যমান করতে সক্ষম হয়েছি তখন আশ্চর্যরূপে ডিওএম পৃষ্ঠার শীর্ষে (279px) তরল বিন্যাসে সঠিক উচ্চতাটি ফিরিয়ে দিয়েছিল। উপরের কোডটি getClientRects ব্যবহার করে যা 280px ফেরত দেয়।
এটি নিম্নলিখিত স্ন্যাপশটে চিত্রিত হয়েছে (একবার কাজ করার পরে ক্রোম থেকে নেওয়া taken)
সেই প্রোটোটাইপ ট্রিকটি কেন কাজ করে তা এখন আমার কাছে নুওউ ধারণা আছে তবে মনে হচ্ছে। বিকল্পভাবে, getClientRects এছাড়াও কাজ করে।
আমি সন্দেহ করি যে এই নির্দিষ্ট উপাদানগুলির সাথে এই সমস্ত সমস্যার কারণটি ছিল অ্যাপেন্ডচিল্ডের পরিবর্তে অভ্যন্তরীণ এইচটিএমএল ব্যবহার করা, তবে এটি এই মুহূর্তে খাঁটি জল্পনা।