关于offsetWidth innerWidth的使用
最近因为有使用到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的使用的更多相关文章
- CSS3无前缀脚本prefixfree.js与Animatable使用
现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...
- CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
- 前端中 width 的获取
这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结.viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法: clientWidth offsetWi ...
- 【音乐App】—— Vue-music 项目学习笔记:播放器内置组件开发(二)
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换 歌词滚动显示 ...
- prefixfree.js和依托应用之Animatable
http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/ http://leaverou.github.io ...
- JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth
1.offsetLeft和offsetTop 只读属性,返回当前元素与父辈元素之间的距离(不包括边框).其中父辈元素的取法是有门道的: (1).若父辈元素中有定位的元素,那么就返回距离当前元素最近的定 ...
- clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
* offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下bor ...
随机推荐
- Big Data Security Part One: Introducing PacketPig
Series Introduction Packetloop CTO Michael Baker (@cloudjunky) made a big splash when he presented ‘ ...
- android数据保存
永久保存数据的方法:1.Shared Preferences 以键值对的形式存储基本数据类型( booleans, floats, ints, longs, and strings),存储的数据在限制 ...
- Linux系统编程(37)—— socket编程之原始套接字
原始套接字的特点 原始套接字(SOCK_RAW)可以用来自行组装IP数据包,然后将数据包发送到其他终端.也就是说原始套接字是基于IP数据包的编程(SOCK_PACKET是基于数据链路层的编程).另外, ...
- hdu2444The Accomodation of Students
思路: 二分图判断+最大匹配模板 二分图判断的方法很好想,没有离散的基础凭空给你个图让你判断也很容易想到染色法,简单的介绍下就是用queue来做,标记一个点为x则他所有的邻点都为x',然后递归的执行下 ...
- BZOJ 3040 最短路 (堆优化dijkstra)
这题不是裸的最短路么?但是一看数据范围就傻了.点数10^6,边数10^7.这个spfa就别想了(本来spfa就是相当不靠谱的玩意),看来是要用堆优化dijkstra了.但是,平时写dijkstra时为 ...
- Odoo “坑” 系列之 XML中的布尔类型
在Odoo中试图通过XML方式更新某条Record的值,却意外发现根本不能更新,经查,对于XML中Boolean类型的字段,更新的方式应该采用eval的方式.
- 新浪微博登陆,获取token
用WeiboAuthListener获取code 用下面的代码获取token..半成品的sdk真让人捉急. String code = values.getString("code" ...
- HDU 1501 & POJ 2192 Zipper(dp记忆化搜索)
题意:给定三个串,问c串是否能由a,b串任意组合在一起组成,但注意a,b串任意组合需要保证a,b原串的顺序 例如ab,cd可组成acbd,但不能组成adcb. 分析:对字符串上的dp还是不敏感啊,虽然 ...
- 3D空间包围球(Bounding Sphere)的求法
引言 在3D碰撞检測中,为了加快碰撞检測的效率,降低不必要的碰撞检測,会使用基本几何体作为物体的包围体(Bounding Volume, BV)进行測试.基本包围体的碰撞检測相对来说廉价也easy的多 ...
- 常用渗透性测试工具(Tools for penetration testing)
常用渗透性测试工具 原文:http://hi.baidu.com/limpid/item/14a2df166adfa8cb38cb3068 对一个应用项目进行渗透性测试一般要经过三个步骤. 第一步, ...