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. mysql 导出sql文件

    1:find  / -name mysqldump -print 先找到mysqldump 目录位置 2:/usr/local/mysql/bin/mysqldump -u root -p hanwe ...

  2. Solr 8.2.0最新RCE漏洞复现

    漏洞描述 国外安全研究员s00py公开了一个Apache Solr的Velocity模板注入漏洞.该漏洞可以攻击最新版本的Solr. 漏洞编号 无 影响范围 包括但不限于8.2.0(20191031最 ...

  3. Ethereum Learning Materials

    Home 注:本页为 EthFans 站内文章精选集.鉴于文章的采集范围较广,我们无法保证文章内容没有重复,也不能保证排列的顺序实现了最优的认识路径.我们只能说,这些文章是我们精挑细选后,确认可以长期 ...

  4. Vue——项目中接口返回值为函数回调,回调函数定义方法(Vue的方法给原生调用)

    在接口调用中,有时会返回给我们一个函数回调,来自动执行我们在前端定义好的某个函数(多出现于通过回调的方式传递某个数值).在原生项目中,我们只要提供一下这个方法就好了,通过函数回调会自动执行.问题就出现 ...

  5. 看 C++ Primer 的58页, 讲拷贝时不能忽略 底层const这里的说的原因有点牵强, 这里给出自己的理解

    extern const  int ci =42; const int * p2  = &ci; extern const  int *const p3= p2; int *p= p3;   ...

  6. IS加载JSON 和 MP4文件 错误 404 提示 需要添加mime映射(默认IIS Express里没有映射)

    问题描述 在发布项目的时候,有一些文件是json文件,在网页中进行加载,但是在IIS7发布的时候,json文件居然是404,无法找到,在URL上输入地址也一样. 错误原因 IIS内部机制,不支持直接访 ...

  7. 【MySQL】表的操作

    " 目录 #. 表操作 1. 创建数据库 2. 进入指定库 3. 创建表 4. 添加记录 5. 查询表的数据和结构 /. 查指定表中的存储数据 /. 查指定表的结构 6. 复制表 /. 即复 ...

  8. idea 快捷使用(一)条件断点的使用

    调试的时候,在循环里增加条件判断,可以极大的提高效率,心情也能愉悦.以下介绍下IDEA使用条件[Condition]断点的方法 1.编写一段样例代码 /** * @author jiashubing ...

  9. Cosmetic Bottles - Cosmetic Packaging: What Are The Characteristics Of Trends?

    There are certain differences in products, of which cosmetics are the most obvious. In addition to t ...

  10. ubuntu 命令记录

    1.su root  进入root模式 2.ifconfig 查看ip地址 3.ls 查看文件 4./etc/init.d/matrix-gui-2.0 stop 关闭matrix界面 5.cd /文 ...