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. 2016级算法第五次上机-A.Beihang Collegiate Pronunciation Contest 2017

    1065 Beihang Collegiate Pronunciation Contest 2017 思路 在字符串中不断做匹配 找到一个匹配就输出 时间复杂度\(O(n)\) ps.模式串是定长的, ...

  2. 大数据平台-修改主机名及ssh免密码登录

    一.查看服务器初始配置: 1.总核数 = 物理CPU个数 X 每颗物理CPU的核数 2.总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数cat /pr ...

  3. Linux之shell

    shell的中文意思是外壳. 通常在图形界面中对实际体验带来的差异不是不同发行版本的终端模拟器,而是shell这个壳. 壳在核外,shell里面的核就是linux内核. shell指的是:提供给使用者 ...

  4. Laravel 控制器 Controller 传值到 视图 View 的几种方法总结

    单个值的传递   with public function index() { $test = "测试"; return view('test.index')->with(' ...

  5. opencv-python 读入带有中文的图片路径

    windows 下读入带有中文的图片路径使用cv2.imread() 不能读入.使用如下代码可以. def cv_imread(filePath): cv_img = cv2.imdecode(np. ...

  6. Hive动态分区 参数配置及语法

    Hive本身是不支持动态分区的.. 但动态分区是真的方便啊..不然手动维护要累死..按日期甚至小时来分区时动辄就好几千上万的分区..手动到哪一年去..? 想要用动态分区要先做一些设置来修改默认的配置. ...

  7. UI设计黄金法则

    1. 网页用户界面(WUI - web user interface) 最佳设计经验与准则 以主页为基准,建立标准的层级结构 保持布局的一致性 将大版本的内容或过于复杂的任务分解为多个页面显示 将导航 ...

  8. 关于jsonp的学习

    电力监控的项目中用到的jsonp请求 例子: //js文件 // **.js; Param({ "YX-15582":{ID:"KWR1_PLC01",TYPE ...

  9. C 标准库 - string.h

    C 标准库 - string.h This header file defines several functions to manipulate C strings and arrays. stri ...

  10. 在windows服务器上设置301、伪静态(wordpress)

    新建一个httpd.ini文件,插入代码: [ISAPI_Rewrite] RewriteCond Host: ^wuchao\.cc$ RewriteRule (.*) http\://www\.w ...