دالة jQuery height()

طرق HTML/CSS jQuery

يستخدم دالة height() للحصول أو تعيين الارتفاع للعنصر المحدد.

عند استخدام دالة height()الحصولعند تعيين الارتفاع، ستعودالعنصر المحدد الأولالارتفاع.

عند استخدام دالة height()تعيينعند تعيين الارتفاع، ستعينجميع العناصر المحددةالارتفاع.

كما يظهر في الشكل التالي، لا تحتوي دالة height() على padding،border أو margin:

يمكن أن يكون قيمة الارتفاع أيضًا نسبية. إذا لم يقدم القيمة أي تلميح+=أو-=سلسلة من الأحرف، يتم حساب الارتفاع المستهدف من خلال إضافة أو طرح القيمة المقدمة من القيمة الحالية (مثل height("+ = 50")).

النحو:

الحصول على الطول:

$(selector).height()

ضبط الطول:

$(selector).height(value)

ضبط الطول باستخدام وظيفة:

$(selector).height(function(index, currentHeight))

مثال

الحصول على طول عنصر DIV:

$("div").click(function(){
　　$(this).height();
});

ضبط طول جميع الفقرات:

$("button").click(function(){
　　$("p").height(50);
});

استخدام وحدات مختلفة لضبط طول جميع الفقرات:

$("#btn1").click(function(){
　　$("p").height(50);
});
$("#btn2").click(function(){
　　$("p").height("7em");
});
$("#btn3").click(function(){
　　$("p").height("100vh");
});

زيادة طول جميع الفقرات عند النقر على الزر (استخدام وظيفة):

$("button").click(function(){
　　$("p").height(function(i, val){
　　　　return val * 2;
　　});
});

يمكن للطريقة height() أيضًا العثور على طول النافذة والوثيقة:

$(window).height(); // عودة طول نافذة المتصفح
$(document).height(); // عودة طول مستند HTML

إظهار الفرق بين width()،height()،innerHeight()،innerWidth()،outerWidth() و outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

إضافة تأثير التمرير السلس عند تمرير المستخدم في الصفحة:

let size = $(".main").height(); // 获取".main" 高度
$(window).keydown(function(event)　{}}
　　if(event.which　===　40)　{　//　إذا تم ضغط زر السهم لأسفل
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　else　if(event.which　===　38)　{　//　إذا تم ضغط زر السهم لأعلى
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

قيمة المعامل

طرق HTML/CSS jQuery