摘要:中的盒子模型通过中提供一系列的方法和属性获取页面中元素的样式信息值系列内容的宽高是给元素定义的这两个样式。
1、js中的盒子模型
2、client系列通过js中提供一系列的方法和属性获取页面中元素的样式信息值;
内容的宽高:是给元素定义的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://www.ucloud.cn/yun/82718.html
摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...
摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...
摘要:以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签,特别注意等,注意的标题结构理解浏览器解析的过程,理解的树形结构,及相应理解标签在各个浏览器上的默认样式代理样式,理解中的重置样式表的概念理解等功能性标签理解标签,理解文件提交过程推荐 以下知识点是前辈师兄总结 1、HTML/HTML5基础: 1.0、语义化H5标签1.1、H5引进了一些新的标签,特别注意article...
摘要:以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签,特别注意等,注意的标题结构理解浏览器解析的过程,理解的树形结构,及相应理解标签在各个浏览器上的默认样式代理样式,理解中的重置样式表的概念理解等功能性标签理解标签,理解文件提交过程推荐 以下知识点是前辈师兄总结 1、HTML/HTML5基础: 1.0、语义化H5标签1.1、H5引进了一些新的标签,特别注意article...
阅读 3040·2021-09-22 15:54
阅读 3951·2021-09-09 11:34
阅读 1748·2019-08-30 12:48
阅读 1144·2019-08-30 11:18
阅读 3408·2019-08-26 11:48
阅读 847·2019-08-23 17:50
阅读 2095·2019-08-23 17:17
阅读 1222·2019-08-23 17:12