js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型)
offsetLeft:返回盒子距离左边的距离
offsetTop:返回盒子距离顶部的距离
offsetHeight:返回盒子的高度,包括border,padding,不包括margin;
offsetWidth:返回盒子的宽度,包括border,padding,不包括margin;
offsetX:
offsetY:
offsetParent:找到有定位的父元素
offset与style.top的区别:
1.offset可以返回没有定位的盒子距离左边的位置,style.top不可以;
2.style.top只能返回行内式,如果没有则返回"";
3.offset返回的是number,style.top返回的是String,加px;
4.offset只读,style.top可读写;
scroll卷曲
scrollLeft:x轴卷曲的距离(ie8不支持)
scrollTop:Y轴卷曲的距离(ie8不支持)
/**
* 兼容封装的scrollLeft和scrollTop
* @returns {{left: (Number|number), top: (Number|number)}}
*/
function getScroll() {
return{
left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,//获取的浏览器的scrollLeft
top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0//获取的浏览器的scrollTop
};
}
scrollHeight:实际页面的高度(如果页面超出了盒子的高度,则是内容的值,如果没有超出去则是盒子的值)
scrollWidth:实际页面的宽度(width+padding)
scrollX:
scrollY:
client可视区域
clientLeft:
clientTop:
clientWidth:
clientHeight:
clientX:
clientY:
js三大家族offset,scroll,cliennt的区别的更多相关文章
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- js 三大家族之offset
JS中的offset家族: 一.offsetWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 ...
- JS中的offset scroll event client
一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- client offset scroll 之间的区别
一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- javascript总结46: JS三大系列-方便的offset 家族
1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2 offset 结构介绍为: 3 offset常用属性 ...
- 第52天:offset家族、scroll家族和client家族的区别
一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...
- 三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
随机推荐
- js架构设计模式——前端MVVM框架设计及实现(一)
前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...
- JDK中的插入排序
算法 有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序,这个时候就要用到一种新的排序方法--插入排序法,插入排序的基本操作就是将一个数据插入到已经排好 ...
- python bottle 简介
bottle是一个轻量级的python web框架, 可以适配各种web服务器,包括python自带的wsgiref(默认),gevent, cherrypy,gunicorn等等.bottle是单文 ...
- POJ1050(dp)
To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 46788 Accepted: 24774 Desc ...
- 私有云存储搭建(owncloud)
第一步.搭建LAMP(基于linux7.1.1503) 1 配置yum(网络加本地,下面为网络) [vault.centos.org_7.1.1503_os_x86_64_] name=added f ...
- 解决使用Idea/Eclipse编写Hadoop程序包依赖问题
解决使用Idea/Eclipse编写Hadoop程序包依赖问题 解决包依赖的一种简单粗暴方法就是, 把下载下来的Hadoop压缩包解压, 搜索里面所有的额jar包文件,然后复制到一个目录,在使用Ide ...
- js中的innerHTML和outerHTML区别
一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子: &l ...
- 网络请求 ---iOS
//1.url要访问的资源 NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; //2.请求,要向服务器请求 N ...
- 【吐血整理】SVN命令行,Subversion的正确使用姿势,让版本控制更简单~
一.写在前面 前面一直博主一直用svn的桌面版本,但看项目经理一直都用的命令行方式,不为性能,还能直接装逼呀!在这里先感谢赵哥,也把它分享给感兴趣的你们~ 二.直接上干货 1. svn checkou ...
- java判断字符串String中是否存在中文
public class IsContainChinese { public static boolean isContainChinese (String str){ boolean flag=tr ...