原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度
JQ:相对比较简便
- 获取浏览器显示区域(可视区域)的高度 :
- $(window).height();
- 获取浏览器显示区域(可视区域)的宽度 :
- $(window).width();
- 获取页面的文档高度
- $(document).height();
- 获取页面的文档宽度 :
- $(document).width();
- 浏览器当前窗口文档body的高度:
- $(document.body).height();
- 浏览器当前窗口文档body的宽度:
- $(document.body).width();
- 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
- $(document).scrollTop();
- 获取滚动条到左边的垂直宽度 :
- $(document).scrollLeft();
- 获取或设置元素的宽度:
- $(obj).width();
- 获取或设置元素的高度:
- $(obj).height();
- 原生JS:
- document.documentElement.scrollTop //firefox
- document.documentElement.scrollLeft //firefox
- document.body.scrollTop //IE
- document.body.scrollLeft //IE
像这种不兼容的获取方式,我们要做一下兼容,封装一个函数
- function getScrollTop(){
- var scroll_top = ;
- if (document.documentElement && document.documentElement.scrollTop) {//如果非IE
- scroll_top = document.documentElement.scrollTop;
- }
- else if (document.body) {//IE浏览器
- scroll_top = document.body.scrollTop;
- };
- return scroll_top;
- };
网页工作区域的高度和宽度
- document.documentElement.clientHeight// IE firefox
原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度的更多相关文章
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- js模拟jq获取id
js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...
- js计算元素距离顶部的高度及元素是否在可视区判断
前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- Js与Jq 获取浏览器和对象值的方法
JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- js,jq获取父,兄弟,子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
随机推荐
- IdentityHashCodeTest
Java学习:identityHashCode和hashCode方法, System类提供了一个identityHashCode(Object x)方法,这个方法返回的是指定对象的精确hashCode ...
- FULL OUTER JOIN
FULL OUTER JOIN 关键字只要左表(table1)和右表(table2)其中一个表中存在匹配,则返回行. SELECT Web.name, access.count, access.dat ...
- Java编译器的常量优化
/* 在给变量进行赋值的时候,如果右侧的表达式当中全都是常量,没有任何变量, 那么编译器javac将会直接将若干个常量表达式计算得到结果. short result = 5 + 8; // 等号右边全 ...
- 卫哲VS投行女,秋后算账是阿里的企业文化吗?
编辑 | 于斌 出品 | 于见(mpyujian) 提到马云,大家都会想到淘宝,阿里,也都期待阿里巴巴的马云爸爸能够给我们免单,从而省去我们每天为钱烦恼的后顾之忧.虽然今天要吃的瓜是有关阿里的,但是并 ...
- idea 快捷使用(三)中断Debug的使用
想要在Debug的时候,中断请求,不要再走剩余的流程了? 不需要关闭服务重新启动程序,可以通过Force Return,即强制返回来避免后续的流程. 点击Force Return,弹出Return V ...
- SpringMVC Controller 接收页面传递的中文参数出现乱码
在Controller中接收到的POST参数如果是中文的话,显示为乱码.已知客户端传过来时编码为UTF-8. 问题产生分析: spring MVC中默认的编码格式为“ISO-8859-1”,因此造成乱 ...
- Steam 游戏 《Sudoku Universe(数独宇宙)》、《Sudoku Killer(数独杀手)》、《Sudoku Jigsaw(数独拼图)》数字位置解析 ---------C# 数独程序解析(2020年寒假小目标11)
日期:2020.02.11 博客期:151 星期二 今天,准备肝一个 C# 的数独读写工具(汇编语言也在努力学习命令方法中...),这三个游戏我早就买下了,一直放在 Steam 库里积灰,看着它的成就 ...
- 2_1 aabb
输出所有形如aabb的4位完全平方数(即前两位数字相等,后两位数字也相同).
- POJ3264 Balances Lineup
建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...
- 转入软工后第一节java课的作业
这个作业,鸽了好久.本来大家都在中秋前发了,我摸摸索索加上各种缓慢的学习,终于是将他做完了. 做完之后,java最基本的输入输出功能都基本学习到了.下面附上代码: import java.util.* ...