原生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 ...
随机推荐
- jmeter的使用---压力测试
jmeter用于压力测试 首先我们要区别压力和攻击,当设立了不适当的线程数量和准备时长,就容易造成攻击. 线程数:虚拟用户数.一个虚拟用户占用一个进程或线程.设置多少虚拟用户数在这里也就是设置多少个线 ...
- dfs+枚举,flip游戏的拓展POJ2965
POJ 2965 The Pilots Brothers' refrigerator Description The game “The Pilots Brothers: fo ...
- 16,div+css的布局较table布局有什么优点?
改版的时候更加方便,只要改css文件 页面加载速度更快,结构化清晰,页面显示简洁 表现与结构相分离 易于搜索引擎优化,排名更靠前
- MySQLroot密码的恢复方法
MySQLroot密码的恢复方法 有可能你的系统没有 safe_MySQLd 程序(比如我现在用的 ubuntu操作系统, apt-get安装的MySQL) , 下面方法可以恢复 1.停止MySQLd ...
- js 判断素数(质数)
判断一个数是不是素数 function isPrinme(n) { if(n == 0 || n==1){ return false; } if(n==2){ return true; } for(v ...
- SQL Server 作业的备份
轉發:https://www.cnblogs.com/Amaranthus/archive/2012/06/25/2561569.html 作业备份,不是备份数据库,是备份作业. DECLARE @j ...
- 《JavaScript高级程序设计》读书笔记(三)基本概念第四小节 操作符
内容---语法 上一小节---数据类型 本小节 操作符---流程控制语句---理解函数 操作符--操作数据值的操作符--算术(如加减).位操作符.关系.相等--ECMAScript操作符可以适用于很多 ...
- 树莓派Ubuntu Mate 16.04 修改为国内更新源
收藏:https://blog.csdn.net/wang_shuai_ww/article/details/80386708 更换步骤以root身份打开 /etc/apt/sources.list ...
- 配置和验证AP功率
1.针对自主AP(Autonomous AP) 使用'power local'配置命令配置AP或Bridge Radio功率级别.在2.4 GHz,802.11g Radio上,您可以设置正交频分复用 ...
- iOS 根据域名查询 IP 地址
在 iOS 开发中,如果需要知道网站的 IP 地址: #include <netdb.h> #include <arpa/inet.h> NSString *webSiteSt ...