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. Linux 内存监控

    1.按照内存使用方式排序 top 之后使用 shift + m 那么top按照内存使用从大到小进行排列,使用 shift + P 表示按照CPU进行排序. bigfish 1118m 438m 30m ...

  2. C#找出接口的所有实现类并遍历执行这些类的公共方法

    //这里找出了实现IOutputArray接口的所有类 private void FindAllClass() { var types = AppDomain.CurrentDomain.GetAss ...

  3. MySql 的操作日志 历史记录

    如何查看mysql数据库操作记录日志 1.首先确认你日志是否启用了mysql>show variables like 'log_bin'. 2.如果启用了,即ON,那日志文件就在mysql的安装 ...

  4. Navicat 导出sql文件和导入sql文件

    1.导出sql文件 (1)选择需要导出数据库表,右击--->转储为sql文件---->结构和数据 (2)会弹出如下界面,采用默认的数据表名,点击确认即可. 2.导入sql文件 (1)点击表 ...

  5. python学习,day3: 文件的读写

    # coding=utf-8 # Author: RyAn Bi import sys f1 = open('yesterday2',mode='w',encoding='utf-8') #w 只能写 ...

  6. 基础篇:6.1)形位公差-要素 Feature

    本章目的:理解形位公差研究的对象-要素,即点.线.面. 1.定义 2.类型 2.1 按存在的状态分 2.2 按结构特征分 2.3 按所处的地位分 2.4  按结构性能分 2.5  按与尺寸关系分

  7. find命令用法集锦

    find命令用法: 01--过滤日志find -name "catelina.*.out"|xargs -f |grep '关键字' 02 -忽略一个目录或者多个目录find ./ ...

  8. native excel 文件已经打开的判断

    book := TXLSWorkbook.Create; try then begin raise Exception.Create('请检查导入的文件是否存在或Excel已经处于打开状态(如果已经打 ...

  9. Vue.js 项目开发学习路线图

    1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...

  10. CDH集群安装配置(六)CDH agent

    在线安装 sudo yum install cloudera-manager-agent cloudera-manager-daemons 离线安装 上传三个server的资源包到cdh1节点上(所有 ...