js盒子模型
来源:互联网 发布:大数据下的税收征管 编辑:程序博客网 时间:2024/06/05 02:39
1、js中的盒子模型
通过js中提供一系列的方法和属性获取页面中元素的样式信息值;
2、client系列
内容的宽高:是给元素定义的width/height这两个样式。如果没有设置height值,容器的高度会根据里面内容自己适应,这样获取的值就是真实的内容的高;如果设置固定的高度,不管内容是多少,内容的高度指的都是设定的这个值;
真实内容的宽高:如果设置的height是200px,如果内容有溢出,那么真实内容的高度是把溢出内容的高度也要加起来;
clientHeight || clientWidth//内容的宽度/高度+左右/上下填充(padding)clientLeft || clientTop//左边框/上边框的高度
3、offset系列
offsetHeight || offsetWidth//clientHeight/clientWidth + 左右/上下边框(和内容是否溢出没有关系)offsetParent//当前元素的父级参照物offsetLeft || offsetTop //当前元素的外边框距离父级参照物的内边框的偏移量
计算元素距离body的上部和左部的距离
function offset(el) { var oLeft = el.offsetLeft, oTop = el.offsetTop, oParent = el.offsetParent; while(oParent) { //ie8下不计算边框 if (navigator.userAgent.indexOf('MSIE 8.0') === -1) { oLeft += oParent.clientLeft; oTop += oParent.clientTop; } oLeft += oParent.offsetLeft; oTop += oParent.offsetTop; oParent = oParent.offsetParent; } return {'left': oLeft,'top': oTop} }offset(box2);//{left: 239, top: 218}
注:在标准的IE8浏览器中,我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内,在IE8浏览器下就不需要单独加边框了;
4、scroll系列
scrollHeight || scrollWidth//真实内容的高度/宽度(包含溢出)+ 左填充/上填充//注:获取到的结果都是约等于的值,因为同一个浏览器是否设置overflow=hidden对于最终的结果是有影响的;在不同的浏览器中我们获取的结果也是不同的。scrollTop || scrollLeft //滚动条卷去的高度
5、操作浏览器本身盒子模型信息
clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度
scrollWidth/scrollHeight是当前页面的真实宽度和高度(所有屏的高度和宽度的和:是一个约等于值)
要兼容浏览器获取浏览器盒子模型信息我们需要这样写
document.documentElement[attr] || document.body[attr];//documentElement在前body在后//获取document.documentElement.clientWidth || document.body.clientWidth;//设置document.documentElement.scrollTop = 0;document.body.scrollTop = 0;<!--注:都需要写两个-->
6、获取浏览器盒子模型信息的兼容方法
function win(attr,value) { //获取值 if(typeof value === "undefined") { return document.documentElement[attr] || document.body[attr]; } document.documentElement[attr] = value; document.body[attr] = value;}win('clientWidth');win('scrollTop',0);
https://segmentfault.com/a/1190000009201313?utm_source=tuicool&utm_medium=referral
阅读全文
0 0
- JS中的盒子模型
- JS盒子模型
- JS盒子模型
- js的盒子模型
- js盒子模型
- js盒子模型
- JS的盒子模型
- js盒子模型常用属性
- JS学习之盒子模型
- js与jq处理盒子模型&&定位
- Js中盒子模型的样式获取
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 常见排序算法小结一(C++实现)(未完)
- ThinkPHP5 行为和钩子
- MySQL创建用户与授权方法
- HDU 6071 Lazy Running (Dijstra, 2017 Multi-Univ Training Contest 4)
- 惟伊集团·银川分公司启动会圆满成功
- js盒子模型
- 如何改变matlab刻度范围,如果改变坐标轴刻度字体大小
- 【NPOI系列】一:Excel写入
- POJ
- Spark--Datasource(Hive)
- 百练2229:Sumsets题解
- 机器学习十三 STD(标准差)在Numpy与Pandas中的不同
- java基础复习-工具类Arrays
- PerconaMySQL安装手册-RPM包方式