Javascript:

    console.log(document.body.clientWidth);        //网页可见区域宽(body)

console.log(document.body.clientHeight);       //网页可见区域高(body)

console.log(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

console.log(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

console.log(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

console.log(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

console.log(document.body.scrollTop);           //网页被卷去的Top(滚动条)

console.log(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

console.log(window.screenTop);                     //浏览器距离Top

console.log(window.screenLeft);                     //浏览器距离Left

console.log(window.screen.height);                //屏幕分辨率的高

console.log(window.screen.width);                 //屏幕分辨率的宽

console.log(window.screen.availHeight);          //屏幕可用工作区的高

console.log(window.screen.availWidth);           //屏幕可用工作区的宽

Jquery:

    console.log($(window).height());                           //浏览器当前窗口可视区域高度

console.log($(document).height());                        //浏览器当前窗口文档的高度

console.log($(document.body).height());                //浏览器当前窗口文档body的高度

console.log($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

console.log($(window).width());                            //浏览器当前窗口可视区域宽度

console.log($(document).width());                        //浏览器当前窗口文档对象宽度

console.log($(document.body).width());                //浏览器当前窗口文档body的宽度

console.log($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

js和jq获取宽度和高度的更多相关文章

  1. 原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

    JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...

  2. Js与Jq 获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...

  3. 关于JQuery获取宽度和高度在chrome和IE下的不同

    之前写了一个关于滚动条的东西,可是在写的时候发现JQuery在获取宽度和高度时在不同浏览器中是不一样的,下面发一下代码给给位看官先展示一下: $(function(){ $("#main&q ...

  4. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  6. js、jq获取屏幕宽高

    参考资料 JS,Jquery获取各种屏幕的宽度和高度

  7. js,jq获取父,兄弟,子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  8. js和jq获取父,兄弟,子节点

    1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 last ...

  9. JS与JQ 获取页面元素值的方法和差异对比

    获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...

随机推荐

  1. ubuntu 上运行的django 出现No space left on device错误

    运行django出现错误信息: [2016-02-16 14:33:24,476 pyinotify ERROR] add_watch: cannot watch /usr/local/lib/pyt ...

  2. VMware安装黑威联通教程+文件 亲身测试成功 老骥伏枥黑威联通母盘QNAP1G-BOOT 1G

    1.首先致敬老骥伏枥大神的帖子. [老骥伏枥-原创]制作黑威联通启动盘:进阶篇 2.其次感谢这位作者的安装教程 作者:f541883216 [老骥伏枥-原创]用我的黑威联通启动盘在WMware搭建系统 ...

  3. 02-线性结构4 Pop Sequence (25 分)

    Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...

  4. mysql 查询json字段 json_extract (mysql 5.7及以上)

    找第一层: SELECT * FROM tourists WHERE json_data->'$.weixinOpenId' = '299485886686868' 或者 SELECT * FR ...

  5. 转-阿里云Kubernetes容器Istio实践之集成日志

    http://cloud.it168.com/a2018/0801/3216/000003216642.shtml#articlecomment https://mbd.baidu.com/newsp ...

  6. oracle12c之三 控制PDB中CPU 资源使用

      CPU资源隔离 数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...

  7. 浅谈Cordova优缺点与环境部署(转载)

    浅谈Cordova优缺点与环境部署 作者:苏华杰 简介 Cordova是一个用基于HTML.CSS和JavaScript的,用于创建跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone.A ...

  8. Java学习之路(一):日常第一课,认识JAVA

    Java的介绍 语言的起源 Java是SUN(Stanford University Network 斯坦福大学网络公司) 1995年推出的一门高级编程语言. Java名称的来源: Java最初是被命 ...

  9. Android学习系列--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  10. hibernate抓取问题

    当使用xml配置类之间的关系时 ,例如 学生 班级,多对一关系 /** * 默认情况会发出2条SQL语句,一条取student,一条取Classroom,其实这只需要一条sql             ...