站長(zhǎng)資訊網(wǎng)
jquery求屏幕高度的方法：1、通過(guò)“alert($(window).height());”方法獲取瀏覽器當(dāng)前窗口可視區(qū)域高度；2、通過(guò)“alert($(document).height());”方法獲取瀏覽器當(dāng)前窗口文檔的高度；3、通過(guò)“alert($(document.body).height());”方法獲取瀏覽器當(dāng)前窗口文檔body的高度等。
本教程操作環(huán)境：Windows10系統(tǒng)、jquery3.2.1版、DELL G3電腦
jquery怎么求屏幕的高度？
js或jQuery獲取當(dāng)前屏幕的各種高度
一、參考地址：
js或jQuery獲取當(dāng)前屏幕的各種高度
jquery監(jiān)控瀏覽窗口尺寸變化執(zhí)行相應(yīng)的代碼
二、
1、Javascript:
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬) 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高) 網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth 網(wǎng)頁(yè)正文全文高： document.body.scrollHeight 網(wǎng)頁(yè)被卷去的高： document.body.scrollTop 網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft 網(wǎng)頁(yè)正文部分上： window.screenTop 網(wǎng)頁(yè)正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的寬： window.screen.width 屏幕可用工作區(qū)高度： window.screen.availHeight 屏幕可用工作區(qū)寬度： window.screen.availWidth
登錄后復(fù)制
2、JQuery:
$(document).ready(function(){ alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?alert($(document).width());//瀏覽器當(dāng)前窗口文檔對(duì)象寬度 alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的寬度 alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin })
登錄后復(fù)制
三、窗口大小改變時(shí)
$(window).resize(function(){ //執(zhí)行代碼塊 });
登錄后復(fù)制
四、點(diǎn)擊返回頂部
$('.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){ $('.go_top').fadeOut(); } });
登錄后復(fù)制
推薦學(xué)習(xí)：《jQuery視頻教程》
