Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencari ketinggian skrin dalam jquery

Bagaimana untuk mencari ketinggian skrin dalam jquery

藏色散人
藏色散人asal
2023-02-07 10:40:423637semak imbas

Cara mencari ketinggian skrin dalam jquery: 1. Dapatkan ketinggian kawasan yang boleh dilihat pada tetingkap semasa penyemak imbas melalui kaedah "alert($(window).height());" ; 2. Melalui kaedah "alert($(document) ).height());" untuk mendapatkan ketinggian dokumen tetingkap semasa penyemak imbas 3. Dapatkan ketinggian badan dokumen tetingkap semasa melalui "alert($ (document.body).height());" kaedah.

Bagaimana untuk mencari ketinggian skrin dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.2.1, komputer DELL G3

Cara mencari ketinggian skrin dengan jquery?

js atau jQuery untuk mendapatkan pelbagai ketinggian skrin semasa

1. Alamat rujukan:

js atau jQuery untuk mendapatkannya pelbagai ketinggian skrin semasa Jenis ketinggian

jquery memantau perubahan saiz tetingkap penyemakan imbas dan melaksanakan kod yang sepadan

2.

1 . Javascript:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

2. JQuery:

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

3. Apabila saiz tetingkap berubah

$(window).resize(function(){
   //执行代码块
});

4. Klik untuk kembali ke atas

$('.go_top').click(function(){
    if ($(window).scrollTop() > 0) {
    $("html,body").stop().animate({ scrollTop: 0 }, 200);
}
});
$(window).scroll(function(){
    var w_h = $(document).scrollTop();
    if(w_h>300){
        $('.go_top').fadeIn();
    }
    if(w_h<=300){
        $(&#39;.go_top&#39;).fadeOut();
    }
});

Pembelajaran yang disyorkan: "Tutorial Video jQuery"

Atas ialah kandungan terperinci Bagaimana untuk mencari ketinggian skrin dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn