HTML标签的offset、client、 scroll和currentStyle属性
本文来自:http://www.cnblogs.com/quanhai/archive/2010/04/19/1715231.html
offsetHeight = borderTopWidth + clientHeight + scrollbarWidth + borderBottomWidth;
offsetWidth = borderLeftWidth + clientWidth + scrollbarWidth + borderRightWidth;
元素内部实际可用区域(高) = clientHeight - paddingTopWidth - paddingBottomWidth;
元素内部实际可用区域(宽) = clientWidth - paddingLeftWidth - paddingRightWidth;
scrollHeight:文章的实际高度,不管是否已经用纵向滚动条浏览过。
scrollWidth:文章的实际宽度,不管是否已经用横向滚动条浏览过。
scrollTop:用纵向滚动条滚过的高度。
scrollLeft:用横向滚动条滚过的宽度。
文章未滚过部分(高) = scrollHeight - scrollTop - clientHeight;
文章未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth;
offsetTop:如果position是absolute,则是相对于body(纵向滚动条滚到最上面,横向滚动条滚到最左面)左上角那个点y轴之间的差。如果是relative,则是相对于上方或外层元素y轴上的差值。如果是static(position的默认值),则该属性没有意义。
offsetLeft:如果position是absolute,则是相对于body(纵向滚动条滚到最上面,横向滚动条滚到最左面)左上角那个点x轴之间的差。如果是relative,则是相对于上方或外层元素x轴上的差值。如果是static(position的默认值),则该属性没有意义。
clientTop:等同于borderTopWidth。
clientLeft:等同于borderLeftWidth。
currentStyle:
height:等同于clientHeight。
width:等同于clientWidth。
left:等同于offsetLeft。
top:等同于offsetTop。
padding:共有4个,可以单独指定,也可以一起指定。该值是指元素border距元素内可用区域之间的距离。
margin:共有4个,可以单独指定,也可以一起指定。该值是指距相邻/周围元素之间的距离。当元素position为relative时,其4个值分别等同于top、right、bottom和left
![]()
HTML标签的offset、client、 scroll和currentStyle属性的更多相关文章
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- 前端 ---client、offset、scroll系列
client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
随机推荐
- spring aop获取目标对象的方法对象(包括方法上的注解)
这两天在学习权限控制模块.以前看过传智播客黎活明老师的巴巴运动网视频教程,里面就讲到权限控制的解决方案,当时也只是看看视频,没有动手实践,虽说看过几遍,可是对于系统中的权限控制还是很迷茫,所以借着这次 ...
- Tcp 数据对象传输接口对象设计
输入是一个对象inputObj,接口对象.Send(inputObj),对端接收之后解包成outputObj(与inputObj应相同),触发onPackageReceive事件 事件 public ...
- 阻止IOS自动识别页面上的电话号码、email地址
之前写页面的时候碰到一个很恶心的情况,在6P上数字自动变色,后来找了一些资料: 在iOS的浏览器上,他们有时候会有一些“自作聪明”,自动把页面上的一串数字识别成电话号码,这样用户不小心点击这串数字,就 ...
- js Range
http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86% ...
- flex 调用WebService1(基于.net)
以.net平台下C#语言开发的WebService为web服务,使用flex actionscript语句访问webservice接口 Flex: Temp.mxml部分代码 //调用WebSer ...
- asp.net mvc 访问.html文件
把html页面放在除Views文件夹外的任意文件夹,如Htmls--123.html,url直接访问便可,如 http://yourname/htmls/123.html 可以在路由表中排出不需要路由 ...
- C#索引器:在集合或数组中取出某一个元素 举例 _【转】
Garmmar: [访问修饰符] 数据类型 this[参数列表] { get { 获取索引器的内容 } set { 设置索引器的内容 } } Eg: <span style="font ...
- hdu1064Financial Management
Problem Description Larry graduated this year and finally has a job. He’s making a lot of money, but ...
- Python学习笔记6(列表生成式)
1.生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >>> range(1, 11) [1, 2, 3 ...
- cherry-pick,revert和rebase使用的3-way合并策略
git中的cherry-pick,revert和rebase都使用的是3-way合并策略,下面就来看看这3个方法使用的merge-base,ours和theirs分别是什么. cherry-pick ...