جاوااسکریپت - jQuery گرفتن ارتفاع رندر شده یک عنصر؟

چگونه ارتفاع رندر شده یک عنصر را به دست میآورید؟

فرض کنید یک عنصر <div> دارید که مقداری محتوا درون آن قرار دارد. این محتوا ارتفاع <div> را افزایش خواهد داد. چگونه میتوانید ارتفاع «نمایش داده شده» را زمانی که صراحتاً ارتفاع را تعیین نکردهاید به دست آورید. واضح است که من امتحان کردم:

var h = document.getElementById('someDiv').style.height;

آیا راهی برای انجام این کار وجود دارد؟ من از jQuery استفاده میکنم اگر این کمک کند.

پاسخ شماره ۱

یکی از موارد زیر را امتحان کنید:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight شامل ارتفاع و فاصلهگذاری عمودی است.

offsetHeight شامل ارتفاع، حاشیه عمودی و حاشیههای بالا/پایین است.

scrollHeight شامل ارتفاع سند محتوا شده است (در صورت وجود اسکرول، بیشتر از فقط ارتفاع خواهد بود)، حاشیههای عمودی و مرزهای عمودی.

پاسخ شماره ۲

باید همین باشد

$('#someDiv').height();

با jQuery. این ارتفاع اولین آیتم در مجموعه بستهبندی شده را به صورت یک عدد بازیابی میکند.

در حال تلاش برای استفاده

.style.height

فقط زمانی کار میکند که شما از ابتدا ویژگی را تنظیم کرده باشید. خیلی مفید نیست!

پاسخ شماره ۳

بدون جیکوئری چون چندین لینک از elem.style.height در ابتدای این پاسخها استفاده کرده بودند...

ارتفاع داخلی:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ارتفاع بیرونی:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

یا یکی از مرجعهای مورد علاقه من: http://youmightnotneedjquery.com/

پاسخ شماره ۴

من از این برای بهدست آوردن ارتفاع یک عنصر استفاده میکنم (یک عدد اعشاری برمیگرداند):

document.getElementById('someDiv').getBoundingClientRect().height

این همچنین هنگامی که از DOM مجازی استفاده میکنید نیز کار میکند. من آن را در Vue به این شکل استفاده میکنم:

this.$refs['some-ref'].getBoundingClientRect().height

برای یک کامپوننت Vue:

this.$refs['some-ref'].$el.getBoundingClientRect().height

پاسخ شماره ۵

میتوانید از .outerHeight() برای این منظور استفاده کنید.

این مقدار ارتفاع کامل رندر شده عنصر را به شما میدهد. همچنین، نیازی به تعیین هیچ css-height برای عنصر ندارید. برای احتیاط میتوانید ارتفاع آن را auto نگه دارید تا مطابق با ارتفاع محتوای آن رندر شود.

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

برای مشاهده روشن این عملکردها میتوانید به سایت jQuery مراجعه کنید یا به پست مفصل اینجا بروید.

این تفاوت بین .height()/innerHeight()/outerHeight() را روشن خواهد کرد

پاسخ شماره ۶

style = window.getComputedStyle(your_element);

سپس به سادگی: style.height

پاسخ شماره ۷

حتماً استفاده کنید

$('#someDiv').height()   // to read it

یا

$('#someDiv').height(newHeight)  // to set it

من این را به عنوان یک پاسخ اضافی میگذارم چون چند چیز مهم وجود دارد که تازه یاد گرفتهام.

من همین حالا تقریباً در تله استفاده از offsetHeight افتادم. این چیزی است که اتفاق افتاد :

• من از حقه قدیمی و خوب استفاده کردم و با استفاده از دیباگر دیدم که عنصر من چه ویژگیهایی دارد
• من دیدم که کدام یک ارزش تقریبی ارزش مورد انتظار من را دارد
• این offsetHeight بود - بنابراین من از آن استفاده کردم.
• بعد متوجه شدم که با یک DIV مخفی کار نمیکند
• بعد از محاسبه maxHeight سعی کردم پنهان شوم اما این کار زشت به نظر میرسید - به دردسر افتادم.
• من جستجویی انجام دادم - jQuery.height() را کشف کردم - و از آن استفاده کردم
• فهمیدم تابع height() حتی روی عناصر مخفی هم کار میکند
• فقط برای سرگرمی پیادهسازی jQuery از ارتفاع/عرض را بررسی کردم

در اینجا فقط بخشی از آن آمده است :

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 

آره، این هم اسکرول و هم آفست را بررسی میکند. اگر این شکست بخورد، حتی بیشتر نگاه میکند و مسائل مربوط به سازگاری مرورگر و CSS را در نظر میگیرد. به عبارت دیگر، چیزهایی که من اهمیتی به آنها نمیدهم - یا نمیخواهم اهمیت بدهم.

اما من لازم نیست. ممنون jQuery!

پیام داستان: اگر jQuery متدی برای چیزی دارد، احتمالاً به دلایل خوبی است، احتمالاً مرتبط با سازگاری.

اگر اخیراً فهرست متدهای jQuery را نخواندهاید، پیشنهاد میکنم نگاهی بیندازید.

پاسخ شماره ۸

من فکر میکنم بهترین راه برای انجام این کار در سال ۲۰۲۰ استفاده از جاوااسکریپت ساده و getBoundingClientRect().height; است

در اینجا یک نمونه است

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

علاوه بر به دست آوردن height به این روش، ما همچنین به تعداد زیادی چیز دیگر درباره div دسترسی داریم.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

پاسخ شماره ۹

من یک کد ساده نوشتم که حتی به JQuery نیاز ندارد و احتمالاً به بعضی از افراد کمک میکند. این کد ارتفاع کل 'ID1' را بعد از لود شدن دریافت میکند و آن را روی 'ID2' استفاده میکند

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

سپس فقط بدن را تنظیم کنید تا آن را بارگذاری کند

<body onload='anyName()'>

پاسخ شماره ۱۰

document.querySelector('.project_list_div').offsetHeight;

پاسخ شماره ۱۱

هوم، ما میتوانیم هندسه عنصر را به دست آوریم...

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

این جاوااسکریپت ساده چطور است؟