当前位置:Gxlcms > JavaScript > js之盒子模型的详解

js之盒子模型的详解

时间:2021-07-01 10:21:17 帮助过:110人阅读

1.js盒子模型

指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值

例:

#box有很多自己的私有属性:

HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype
var box = document.getElementById("box");
console.dir(box);

 一提到盒子模型,大家首先会想到的是css的盒子模型,那么JS盒子模型指的是通过JS中提供的一系列的属性和方法,获取页面中的元素的样式信息值。

  对于一个#div(有很多自己的私有的属性) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype

  下面是一些JS方法

  1、client系列(当前元素的几个私有的属性)

  内容的宽度和高度:我们设置的width/height这两个样式就是内容的宽和高,如果没有设置height值,容器的高度会根据里面的内容自己进行适应,这样获取的值就是真实内容的高;如果设置固定了高度了,不管内容是多了还是少了,其实我们内容的高度指的都是设定的那个值。

  真实内容的宽度和高度:这个代指的是实际内容的宽高(和我们设置的height没有必然的联系),例如我设置高度为200px,如果内容有溢出,那么真实内容的高度就是要把溢出的内容高度加进来的

  clientWidth/clientHeight 内容的宽度/高度 + 左右/上下 填充(和内容溢出没有关系)

  clientLeft:左边框的宽度 clientTop:上边框的高度 (border[Left/Top]Width)

  2、offset系列

  offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框(和内容是否溢出也是没有任何的关系的)

  offsetParent:当前元素的父级参照物

  offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量

  3、scroll系列

  scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样(前提是:容器中的内容没有溢出的情况下) 如果容器中的内容有溢出,我们获取的结果如下规则

  scrollWidth:真实内容的宽度(包含溢出)+左填充

  scrollHeigh真实内容的高度(包含溢出)+上填充

  获取到的结果都是约等于的值,因为:同一个浏览器,我们是否设置overflow=“hidden”对于最终的结果是有影响的;在不同的浏览器下取到的结果也是不同的。

  scrollLeft/scrollTop:滚动条卷去的宽度和高度

  

二、关于JS盒子模型属性取值的问题

  我们通过这13个属性值获取到的结果永远不可能出现小数,都是整数,浏览器在获取结果的时候,还在原来真是结果的基础上进行四舍五入;

三、关于操作浏览器本身的盒子模型信息

  clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)

  scrollWidth/scrollHeight 是当前页面的真实的宽度和高度(所有屏加起来的宽度和高度~但是是一个约等于的值)

  我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套

  document.documentElement[attr] || document.body[attr];

  必须document.documentElement在前

  例如document.documentElement.clientWidth || document.body.clientWidth

  设置也需要写两套

  编写一个有关于操作浏览器盒子模型的方法 ,代码如下 

//如果只传递了attr没有传递value,默认的意思是获取样式值。如果都传递了,意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法,通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

  

以上就是js之盒子模型的详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行