最近因为有使用到offsetWidth 和innerWidth,刚开始以为这两个属性在jq何js之中是可以通用的,谁知道在js中使用innerWidth时,发现如果对页面元素使用它时,发现出来的是undefined,通过查询资料得知,该属性只能对window使用,也就是对窗口使用,所以在此弄一篇随便来记录一下。当然了,jq也不能直接使用offsetWidth,要先转为为dom对象才可以使用,列入$("#button")[0].offsetWidth;

以下是一些基本的属性:

Javascript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jquery:

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

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

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

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

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

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

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

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

关于offsetWidth innerWidth的使用的更多相关文章

  1. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  2. CSS3无前缀脚本prefixfree.js与Animatable使用介绍

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...

  3. 前端中 width 的获取

    这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结.viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法: clientWidth offsetWi ...

  4. 【音乐App】—— Vue-music 项目学习笔记:播放器内置组件开发(二)

    前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换 歌词滚动显示 ...

  5. prefixfree.js和依托应用之Animatable

    http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/ http://leaverou.github.io ...

  6. JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth

    1.offsetLeft和offsetTop 只读属性,返回当前元素与父辈元素之间的距离(不包括边框).其中父辈元素的取法是有门道的: (1).若父辈元素中有定位的元素,那么就返回距离当前元素最近的定 ...

  7. clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight

    clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...

  8. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别

    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...

  9. javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下bor ...

随机推荐

  1. hosting company 的 mail , localhost send 不到

    不是每一家 hosting 的 mail 都运行你在本地连接发email的. 或许是因为安全的顾虑吧. 总之下次如果发现在本地发不出email,可以试试看 upload to server. 过往经验 ...

  2. 关于Android读取不同位置(drawable,asset,SDCard)的图片资源的总结

    方式一: 已将图片保存到drawable目录下,通过图片id获得Drawable或者Bitmap,此方式最常用.(若只知道图片的名称,还可以通过图片的名称获得图片的id) (1)通过图片id获得Dra ...

  3. SpringMVC、Zookeeper、Dubbo使用

    联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使前 ...

  4. 【转】用串口登录Beaglebone Black、用usb共享电脑网络、内核模块的本地编译

    原文网址:http://bbs.eeworld.com.cn/thread-431507-1-1.html 串口连接BBB使用usb线可以连接BBB和电脑,用ssh就可以登录BBB来进行操作.但有时候 ...

  5. MD中bitmap源代码分析--清除流程

    bitmap的清零是由bitmap_daemon_work()来实现的.Raid1守护进程定期执行时调用md_check_recovery,然后md_check_recovery会调用bitmap_d ...

  6. matrix矩阵求逆 与解方程模板 留做备用 (有bug,待补充)

    // // main.cpp // 矩阵求逆 // // Created by 唐 锐 on 13-6-20. // Copyright (c) 2013年 唐 锐. All rights reser ...

  7. Neighbour table overflow --- arp表溢出

    [root@jiangyi01.sqa.zmf /home/ahao.mah] #grep . /proc/sys/net/ipv4/neigh/default/gc_thresh* /proc/sy ...

  8. XAMPP的MYSQL无法启动

    昨天用各种方式试验MYSQL的数据库备份与恢复操作,恢复过程中,MYSQL就无法启动了. 提示如下: 22:59:43 [mysql] Attempting to start MySQL app... ...

  9. mysql命令行里的加载更多显示

    mysql> pager morePAGER set to 'more'mysql> pager lessPAGER set to 'less'mysql> nopagerPAGER ...

  10. hibernate 一对多双向关联 详解

    一.解析: 1.  一对多双向关联也就是说,在加载班级时,能够知道这个班级所有的学生. 同时,在加载学生时,也能够知道这个学生所在的班级. 2.我们知道,一对多关联映射和多对一关联映射是一样的,都是在 ...