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. 《macOS 使用手册》之远程控制

    https://support.apple.com/zh-cn/guide/mac-help/mchlp1066/mac 选择版本: macOS Catalina 10.15 macOS Mojave ...

  2. 移动端 vue + mintUI 实现头部页签切换,按需加载~

    记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...

  3. codeforces-1271A - Suits

    A. Suits   A new delivery of clothing has arrived today to the clothing store. This delivery consist ...

  4. SSIS 从oracle 转数据回MS SQL

    SSIS 从oracle 转数据回MS SQL,转每月的销售记录,大概15000以内,在开发机器上没问题,部署到生产环境出现各种状况“ SSIS 无法从连接伺服器的OLE DB提供者BULK 提取资料 ...

  5. stl_list复习

    #include <iostream>#include <list>#include <algorithm>using namespace std; //底层结构是 ...

  6. 攻防世界 web 新手练习 刷题记录

    1.view_source 既然让看源码,那就F12直接就能看到. 2.robots 先百度去简单了解一下robots协议 robots协议(robots.txt),robots.txt文件在网站根目 ...

  7. ubuntu mysql允许root用户远程登录

    有两种方法: 一. 1.mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPT ...

  8. 使用命令将单个java文件打包为jar

    思路:先将java文件编译为class文件,然后再打包为jar 参考博文:https://www.cnblogs.com/sxdcgaq8080/p/8126770.html http://www.m ...

  9. 【docker问题】Client.Timeout exceeded while awaiting headers

    在进行docker pull 拉取镜像时,出现过下面的错误: net/http: request canceled while waiting for connection (Client.Timeo ...

  10. VUE 鼠标右键自定义

    需要在区域内右击自定义菜单的DIV绑定contextmenu右击事件 <div   style="width:100% ; z-index: inherit;position: rel ...