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 获取滚动条的高度,以及距离顶部的高度的更多相关文章

  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. [Jenkins] TestComplete 使用Jenkins进行持续集成测试

    1.安装正确的TestComplete插件 在Jenkins里面搜索TestComplete,找到正确的插件然后安装,可以重启jenkins或者选择不重启 在Install Tab 下面可以查看到正确 ...

  2. github是什么,有什么用

    转载连接:https://blog.csdn.net/obkoro1/article/details/68066441 写在前面:关于github的文章我已经写了两篇了,关于github个人网站搭建和 ...

  3. Android学习03

    ToggleButton和Switch 状态开关ToggleButton与开关switch也是由button按钮派生出来的,因此他们的本质也是按钮,button支持的各种属性,方法toggleButt ...

  4. redis(一)动态字符串

    redis 动态字符串 概述 Sda(Simple Dynamic String) 简单动态字符串是 redis中用来表示字符串的结构,而不是传统 C 字符串. 主要的特点就是Sda要做到高效和 二进 ...

  5. Java数字和字符的对照关系表

    /* 数字和字符的对照关系表(编码表): ASCII码表:American Standard Code for Information Interchange,美国信息交换标准代码. Unicode码 ...

  6. 洛谷 P2118 比例简化(枚举)

    嗯... 题目链接:https://www.luogu.org/problem/P2118 这道题的出题人很善良,l的范围不是很大,所以我们可以逐一枚举. 本题主要思想就是把所有的比例都转换为乘积的形 ...

  7. https://www.cnblogs.com/chanshuyi/p/alibaba_review_3_level.html

    https://www.cnblogs.com/chanshuyi/p/alibaba_review_3_level.html http://www.cnblogs.com/skywang12345/ ...

  8. Centos5.5+LAMP环境

    Note:如果网络正常,apache服务正常,仍然不能访问网页.需要检查linux 防火墙是否关闭. ( 先重新启动防火墙 service iptables start 然后输入配置防火墙的命令并查看 ...

  9. JS利用HTML5的Web Worker实现多线程

    需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = ne ...

  10. 关闭AnyConnect登录安全警告窗口

    一.问题描述:使用AnyConnect client连接时,如何关闭的安全警告窗口? 二.原因分析:   AnyConnect Server(ASA)和AnyConect client(PC)上没有受 ...