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. 比较 GET 与 POST

    post比get安全 get请求方法向url添加数据  全部用POST不是十分合理,最好先把请求按功能和场景分下类, 对数据请求频繁,数据不敏感且数据量在普通浏览器最小限定的2k范围内,这样的情况使用 ...

  2. Nginx反向代理与负载简单实现

    反向代理 1.proxy_pass 通过反向代理把请求转发到百度 2.proxy_pass 既可以是ip地址,也可以是域名,同时还可以指定端口 3.proxy_pass 指定的地址携带了URI,如果前 ...

  3. selectComponent是ok的,小程序组件 component方式,让子页面重绘

    this.selectComponent('#news').init(); 其中news是父级xml文件引用子组件的时给子组件的id. 当父级传给子级的数据有变化时,需要子页面重绘,所以就用上面那行代 ...

  4. 启用mysql日志记录执行过的sql

    在mysql命令行或者客户端管理工具中执行:SHOW VARIABLES LIKE "general_log%"; 结果: general_log OFF general_log_ ...

  5. LESS从入门到精通

    LESS从入门到精通 一.LESS是什么 LESS 是 CSS预处理语言,是 CSS 的扩展. 然后说说比较流行的几款预编译器:SASS/SCSS.LESS.Stylus. SASS 学习网站: ht ...

  6. git泄露利用脚本

    留一下万一之后用得着呢 工作原理 1.解析.git/index文件,找到工程中所有的: ( 文件名,文件sha1 ) 2.去.git/objects/ 文件夹下下载对应的文件 3.zlib解压文件,按 ...

  7. C#的datatable使用

    // 构造datatable DataTable dt = new DataTable("test_table"); dt.Columns.AddRange(new DataCol ...

  8. 文献综述十六:基于UML的中小型超市管理系统分析与设计

    一.基本信息 标题:基于UML的中小型超市管理系统分析与设计 时间:2016 出版源:Journal of Xiangnan University 文件分类:uml技术系统的研究 二.研究背景 开发一 ...

  9. C#编写运行在Linux环境下的采用Mediainfo来获取多媒体文件信息的代码

    项目开始设计的是运行在windows下,所以一开始采用的是windows服务模式来获取多媒体文件信息,后来要求调整为可以在Linux下运行,经过这两天的资料查找,实现了Linux下通过.NET来获取多 ...

  10. Struts2注解详解

    一,引入支持Struts2支持注解开发jar包: struts2-convention-plugin-2.1.8.1.jar(支持Struts2框架注解开发的jar包) 二,Struts2使用注解开发 ...