jquery如何求屏幕的高度

前端开发   发布日期:2023年06月08日   浏览次数:609

这篇“jquery如何求屏幕的高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jquery如何求屏幕的高度”文章吧。

jquery求屏幕高度的方法:1、通过“alert($(window).height());”方法获取浏览器当前窗口可视区域高度;2、通过“alert($(document).height());”方法获取浏览器当前窗口文档的高度;3、通过“alert($(document.body).height());”方法获取浏览器当前窗口文档body的高度等。

js或jQuery获取当前屏幕的各种高度

1、Javascript:

  1. 网页可见区域宽: document.body.clientWidth
  2. 网页可见区域高: document.body.clientHeight
  3. 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
  4. 网页可见区域高: document.body.offsetHeight (包括边线的高)
  5. 网页正文全文宽: document.body.scrollWidth
  6. 网页正文全文高: document.body.scrollHeight
  7. 网页被卷去的高: document.body.scrollTop
  8. 网页被卷去的左: document.body.scrollLeft
  9. 网页正文部分上: window.screenTop
  10. 网页正文部分左: window.screenLeft
  11. 屏幕分辨率的高: window.screen.height
  12. 屏幕分辨率的宽: window.screen.width
  13. 屏幕可用工作区高度: window.screen.availHeight
  14. 屏幕可用工作区宽度: window.screen.availWidth

2、JQuery:

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

3、窗口大小改变时

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

4、点击返回顶部

  1. $('.go_top').click(function(){
  2. if ($(window).scrollTop() > 0) {
  3. $("html,body").stop().animate({ scrollTop: 0 }, 200);
  4. }
  5. });
  6. $(window).scroll(function(){
  7. var w_h = $(document).scrollTop();
  8. if(w_h>300){
  9. $('.go_top').fadeIn();
  10. }
  11. if(w_h<=300){
  12. $('.go_top').fadeOut();
  13. }
  14. });

以上就是jquery如何求屏幕的高度的详细内容,更多关于jquery如何求屏幕的高度的资料请关注九品源码其它相关文章!