JQ:相对比较简便

  1. 获取浏览器显示区域(可视区域)的高度
  2. $(window).height();
  3. 获取浏览器显示区域(可视区域)的宽度
  4. $(window).width();
  5. 获取页面的文档高度
  6. $(document).height();
  7. 获取页面的文档宽度
  8. $(document).width();
  9. 浏览器当前窗口文档body的高度:
  10. $(document.body).height();
  11. 浏览器当前窗口文档body的宽度:
  12. $(document.body).width();
  13. 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
  14. $(document).scrollTop();
  15. 获取滚动条到左边的垂直宽度
  16. $(document).scrollLeft();
  17. 获取或设置元素的宽度:
  18. $(obj).width();
  19. 获取或设置元素的高度:
  20. $(obj).height();
  21.  
  22.  原生JS:
  1. document.documentElement.scrollTop //firefox
  2.  
  3. document.documentElement.scrollLeft //firefox
  4.  
  5. document.body.scrollTop //IE
  6.  
  7. document.body.scrollLeft //IE

像这种不兼容的获取方式,我们要做一下兼容,封装一个函数

  1.                          function getScrollTop(){
  2. var scroll_top = ;
  3. if (document.documentElement && document.documentElement.scrollTop) {//如果非IE
  4. scroll_top = document.documentElement.scrollTop;
  5. }
  6. else if (document.body) {//IE浏览器
  7. scroll_top = document.body.scrollTop;
  8. };
  9. return scroll_top;
  10. };

网页工作区域的高度和宽度

  1. document.documentElement.clientHeight// IE firefox
  1.  

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度的更多相关文章

  1. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  2. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  3. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. js计算元素距离顶部的高度及元素是否在可视区判断

    前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...

  5. 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  6. 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制

    这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...

  7. Js与Jq 获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...

  8. js获取元素的滚动高度,和距离顶部的高度

    jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...

  9. js,jq获取父,兄弟,子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

随机推荐

  1. IdentityHashCodeTest

    Java学习:identityHashCode和hashCode方法, System类提供了一个identityHashCode(Object x)方法,这个方法返回的是指定对象的精确hashCode ...

  2. FULL OUTER JOIN

    FULL OUTER JOIN 关键字只要左表(table1)和右表(table2)其中一个表中存在匹配,则返回行. SELECT Web.name, access.count, access.dat ...

  3. Java编译器的常量优化

    /* 在给变量进行赋值的时候,如果右侧的表达式当中全都是常量,没有任何变量, 那么编译器javac将会直接将若干个常量表达式计算得到结果. short result = 5 + 8; // 等号右边全 ...

  4. 卫哲VS投行女,秋后算账是阿里的企业文化吗?

    编辑 | 于斌 出品 | 于见(mpyujian) 提到马云,大家都会想到淘宝,阿里,也都期待阿里巴巴的马云爸爸能够给我们免单,从而省去我们每天为钱烦恼的后顾之忧.虽然今天要吃的瓜是有关阿里的,但是并 ...

  5. idea 快捷使用(三)中断Debug的使用

    想要在Debug的时候,中断请求,不要再走剩余的流程了? 不需要关闭服务重新启动程序,可以通过Force Return,即强制返回来避免后续的流程. 点击Force Return,弹出Return V ...

  6. SpringMVC Controller 接收页面传递的中文参数出现乱码

    在Controller中接收到的POST参数如果是中文的话,显示为乱码.已知客户端传过来时编码为UTF-8. 问题产生分析: spring MVC中默认的编码格式为“ISO-8859-1”,因此造成乱 ...

  7. Steam 游戏 《Sudoku Universe(数独宇宙)》、《Sudoku Killer(数独杀手)》、《Sudoku Jigsaw(数独拼图)》数字位置解析 ---------C# 数独程序解析(2020年寒假小目标11)

    日期:2020.02.11 博客期:151 星期二 今天,准备肝一个 C# 的数独读写工具(汇编语言也在努力学习命令方法中...),这三个游戏我早就买下了,一直放在 Steam 库里积灰,看着它的成就 ...

  8. 2_1 aabb

    输出所有形如aabb的4位完全平方数(即前两位数字相等,后两位数字也相同).

  9. POJ3264 Balances Lineup

    建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...

  10. 转入软工后第一节java课的作业

    这个作业,鸽了好久.本来大家都在中秋前发了,我摸摸索索加上各种缓慢的学习,终于是将他做完了. 做完之后,java最基本的输入输出功能都基本学习到了.下面附上代码: import java.util.* ...