javascript基础总结（三）——盒子模型

RayKr 发布于2019-08-20 16:06 / 457人阅读

摘要：中的盒子模型通过中提供一系列的方法和属性获取页面中元素的样式信息值系列内容的宽高是给元素定义的这两个样式。

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);

GPU云服务器云服务器盒子模型大学三年php总结 javascript学习总结基础javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82718.html

DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

iOS122 2019-08-29 11:13 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

HackerShell 2019-08-01 15:41 评论0 收藏0
盒模型的一些碎碎念

摘要：盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。 1. 盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。在我们编写HTML时，网页上的内容几乎都是被包在一个个元素（当然也可以叫做标签）中的，最常见的有div...

王伟廷 2019-08-29 16:27 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

zhaochunqi 2019-08-28 18:06 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

learn_shifeng 2019-08-21 10:27 评论0 收藏0