Javascript中的盒子模型
2017-05-17 本文已影响63人
icessun
说起盒子模型，我们首先会想到
css盒子模型，主要是针对标准浏览器和非标准浏览器而言，其由四个部分组成：手动设置的宽高+padding（内边距）+border+margin（外边距）
当然，我们的js也有所谓的盒子模型，主要是通过元素身上的属性和方法，来获取元素身上的样式值
client系列：可视区，视口，浏览器客户端
-
clientWidth：手动设置的宽度（内容区）+左右padding宽（内边距），一般也就是内容可视区的宽度 -
clientHeight：手动设置的高度+上下padding，内容可视区的高度 -
clientLeft：左边框的宽度，几乎不用 -
clientTop：上边框的宽度
offset系列：偏移量，只能获取不是设置，得到的是数值
-
offsetWidth：手动设置的宽度（内容区域）+左右padding宽（内边距）+左右的border宽- 也可以说是：
clientWidth+左右的border宽
- 也可以说是：
-
offsetHeight：手动设置的高度+上下padding宽+上下的border宽，获取的是数值，不带单位，只能获取不能设置，可以获取行内样式和内嵌样式- 也可以说是：
clientHeight+上下的border宽
- 也可以说是：
-
offsetLeft：当前元素的外边框距离他最近的定位父级元素的内边框的距离，border到定位父级元素的内边框的距离，不包括border宽度 -
offsetTop：当前元素的外边框距离他定位父级元素的内边框的距离
通过offserLeft和offsetTop可以计算一个元素的位置
// 思路：计算一个元素的位置 那么要传入这个元素参数，返回位置（以对象的形式返回）
function getElePosition(ele){
var x=0,y=0;
while(ele!=null){
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetParent;
}
return {
x:x,
y:y
};
}
-
offsetParent：元素定位的父级
scroll系列：滚动区
-
scrollWidth：内容未溢出的情况下，这个值等于clientWidth，实际内容的宽度 -
scrollHeight：内容未溢出的情况下，这个值等于clientHeight，实际内容的高度 -
scrollLeft：页面被浏览器卷去的宽度，这属性是可写的，设置来让元素中的内容滚动 -
scrollTop：页面被浏览器卷去的高度，这属性是可写的，设置来让元素中的内容滚动 - 在内容溢出的情况下，不同的浏览器拿到的值是不同的；就算是同一浏览器，内容是否溢出拿到的值也不同；当内容溢出的时候，
scrollHeight约等于：内容真实的高度+上padding
JS盒子模型兼容的写法
if(document.compatMode == "BackCompat") {//渲染方式
wHeight = document.body.clientHeight;
}else {//"CSS1compat"
wHeight = document.documentElement.clientHeight;
}
其他的补充
-
clientX：鼠标到可视区左边框的距离 -
clientY：鼠标到可视区上边框的距离 -
offsetX：鼠标到容器左边框的距离 -
offsetY：鼠标到容器上边框的距离
封装思想
由于上面的js盒子模型中，我们遇到几个问题：1. 取到的值都是复合值，无法取到单独的宽和高；2. 盒子的偏移量只能取到当前元素外边框到定位父级元素内边框的距离，无法获取当前元素到body的距离；3. 求可视区的宽高和被浏览器卷去的宽度和高度比较麻烦；基于上面的一些问题，我们可以进行封装。
- 属性的判断：
-
.点：if(obj.xxx)，结果转布尔值：如果对象上面有这个属性就会进入if条件判断语句，或者是：typeof obj.xxx=='function'把其放在条件判断语句中。属性是变量的时候只能用[]来获取， -
in：属性 in 对象：getComputedStyle in window
-
- 要是报错，我们可以用
try...catch(e){..}捕获 - 然后用正则去匹配一些我们需要的结果：
reg.test()，str.search(reg)===-1；reg.test()和reg.exec()会影响到reg.lastIndex()的值- 字符串跟正则配合的方法：
replace()macth()-
split()：str.split(/[^\d]+/g) search()
- 字符串跟正则配合的方法：
区别结构父级和定位父级
结构父级：
parentNode，其最大的元素是Html；
定位父级：offsetParent，其最大的元素是body；
<body class="body">
<div class="divOuer" id="divOuer">divOuter
<div class="divCenter" id="divCenter">divCenter //这个相对定位
<div class="divInner" id="divInner">divInner</div> //这个绝对定位
</div>
</div>
<script>
var oInner=document.getElementById('divInner');
//需求：想找到所有的结构父级；思路：必须先找到第一个结构父级，一层层往上找；
var par=oInner.parentNode;
while(par){
alert(par.className); //结果是：divCenter divOuter body html undefined（说明className不能加到!DOCTYPE html上面）
par=par.parentNode;
}
//需求：找到inner所有的定位父级
var par=oInner.offsetParent;
while(par){
alert(par.className); // 结果是：divOuer body
par=par.offsetParent;
}
</script>
