首页 教程 API文档

获取盒型尺寸数据

2015-09-08 16:42:33

属性


使用频率
所属模块 Std.dom
成员类型 公有成员函数

描述


boxSize方法用于获取当前DOM元素的客户区以外的大小,可以包含border,padding,margin等.


他会返回一个object对象,其中包含这些键:

paddingTop,paddingBottom,borderTopWidth,borderBottomWidth,paddingRight,paddingLeft,borderRightWidth,borderLeftWidth

其中包含的width键的值并非当前元素的宽度,而是paddingTop,paddingBottom,borderTopWidth,borderBottomWidth的值相加.

其中包含的height键值也并非当前元素的高度,而是paddingRight,paddingLeft,borderRightWidth,borderLeftWidth的值相加.

当参数为true的时候,这个返回的对象还会包含这些值:marginTop,marginRight,marginBottom,marginLeft

其中width会加上marginRight与marginLeft的值,height会加上marginTop与marginBottom的值.

语法



Object boxSize(Boolean hasMargin = false);
        

参数


类型 描述
Boolean 是否包含margin值,默认为false

返回值


包含盒子各属性值的Object对象

相关例子


html代码


<div id="abc" style="margin:5px;padding:6px;border:1px solid red;width:20px;height:20px"></div>
        

获取boxSize


Std.dom("#abc").boxSize(true);
        

得到结果


{
    width:24,
    height:24,
    paddingRight:6,
    paddingTop:6,
    paddingLeft:6,
    paddingBottom:6,
    borderRightWidth:1,
    borderTopWidth:1,
    borderLeftWidth:1,
    borderBottomWidth:1,
    marginTop:5,
    marginBottom:5,
    marginRight:5,
    marginLeft:5
}