javascript之复习(css属性值的计算)

时间:2024-01-06 09:58:32

js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样。好在有个offsetWidth,

 <style type="text/css">
*{margin: 0;padding: 0;}
#aa{
margin: 20px;
padding: 15px;
border: 10px solid red;
width: 50px;
height: 50px;
background-color: orange;
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="aa">a</div>
</body>

加不加box-sizing的offsetWidth分别为100和50,content-box的时候是15*2+10*2+50=100;另一个是15*2+10*2+0=50;border-box的时候width是指width+border+padding的值。所以可得

offsetWidth=borderWith+paddingWidth+width;都成立。offsetWidth不受盒子模型影响,用起来是非常好的。
在jq中,提供innerWidth()方法和outerWidth方法,计算是paddingWidth+width;但是在设置的时候不能直接设置,他就是个虚拟的值,不存在的属性。
outerWidth() 计算是borderWidth+paddingWidth+width;

jq还有个height()是只取width的。

还有就是浏览器窗口大小和页面大小,网景给我们提供了一个好用的只读属性innerWidth
,IE9也支持它,用它获取窗口的宽度,但是旧版本的IE的怪异模式下表现不一,ie又发明了一套clientXXX的属性,
用于获取元素可视区域的尺寸。
//可视区的宽度,不包括滚动条,即窗口大小

var windowWidth=document.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

如果不支持旧版本ie,或者手机框架,可以放心的用

windowWidth=window.innerWidth;

再来看文档的宽,标准浏览器搞了一套outherXXX的属性,那是获得浏览器尺寸的。ie又给我们奉上了scrollXXX和offsetXXX,但是实现的时候又有好多的意见不一致,搞得没法通用。留下兼容性问题。
//浏览器尺寸的
outerWidth和outherHeight
//offsetWidth
IE,Opera认为offsetWidth=clientWidth+滚动条+边框
NS,FF认为offsetWidth是网页内容实际宽度,可以小于clientWidth
//srollWidth
IE、Opera认为scrollWidth是网页实际内容宽度,可以小于clientWidth
NS、FF认为srcollWidth是网页内容宽度,不过最小值是clientWidth

//于是取其最大值
var pageWidth=Math.max(
document.documentElement.scrollWidth,
document.documentElement.offsetWidth,
document.body.scrollWidth,
document.body.offsetWidth
)

下面再来说元素的坐标

div.offsetLeft,offsetTop,都是相对于offsetParent的位置,我们一直向上累加,就能得到元素相对于页面的坐标。

元素的offsetParents是怎么确定的呢?

如果元素被移出dom或display为none,或为HTML,BODY元素,或position的精确值为fixed时,返回null,
否则分为2种情况,position为absolute,relative的元素的offsetParent总是为其最近的已定位的祖先,没有找最近的td,th元素,再没有返回body。
position为static的元素的offsetPatent先找最近的td,th,table元素,再没有返回body。

但现实中,ff在position为fixed返回body,在ie678下,会增加一条规则,先寻找离元素最近的设置有能激活hasLayout的祖先元素。

jq也有个offsetParent,它将选择元素的所有offsetParent收集起来,包装为jq对象返回。
浏览器认为offsetParent最高取到body,可能为null,jq认为元素的offsetParent的position必须为relative或absolute,否则继续回上寻找另一个被定位的祖先,没有返回html,
jq认为position:fixed也有offsetParent,就是当前可视区。

window.pageXoffset是滚动条x距离,pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

还有div.scrollTop,div.scrollLeft...

上一张老图

javascript之复习(css属性值的计算)