kissy获取容器border、margin、padding值（方法一）

胡锡铭

浏览: 7076 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

kissy

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
	<style type="text/css">
		.content{
			width: 100px;
			height: 100px;
			border: 1px solid #333;
			margin: 10px;
			padding: 10px;
		}
	</style>
    <div class="content"></div>
</body>
</html>

div容器的各个值获取要用到kissy的3个方法的组合。现在我们先看下这3个方法的介绍：

Number outerWidth ( selector , includeMargin)

获取符合选择器的第一个元素的宽度值, 注意: 该值除了包含元素本身宽度和 padding 外, 还包含 border或margin .

Parameters:

selector (string|HTMLCollection|Array<HTMLElement>) – 字符串格式参见 KISSY selector

includeMargin (Boolean) – 是否包含 margin, 默认仅包含 border

Returns:

符合选择器的第一个元素的宽度值.

Return type:

Number

Number innerWidth ( selector )

获取符合选择器的第一个元素的宽度值, 注意: 该值包含 padding .

Parameters:

selector (string|HTMLCollection|Array<HTMLElement>) – 字符串格式参见 KISSY selector

Returns:

符合选择器的第一个元素的宽度值.

Return type:

Number

Number width ( selector )

获取符合选择器的第一个元素的宽度值.

Parameters:

selector (string|HTMLCollection|Array<HTMLElement>) – 字符串格式参见 KISSY selector

Returns:

符合选择器的第一个元素的宽度值.

Note

该方法获取的是元素的真实宽度, 不包含 padding, border, margin. 且始终返回像素值

注意: 该方法与 innerWidth() 和 outerWidth() 的区别.

高度的获取方法类似，这里不再阐述。

如此，我们便可以动态计算出：

var body = S.one('.content'),
	//横向
	bodyBorderX = body.outerWidth() - body.innerWidth(),//左右边框width总和
	bodyMarginX = body.outerWidth(true) - body.outerWidth(),//左右margin总和
	bodyPaddingX = body.innerWidth() - body.width(),//左右padding总和
	//纵向
	bodyBorderY = body.outerHeight() - body.innerHeight(),
	bodyMarginY = body.outerHeight(true) - body.outerHeight(),
	bodyPaddingY = body.innerHeight() - body.height();

应用场景：

kissy的dialog内部的body不能自适应宽度和高度，必须手动设置body的宽和高，又为了能够兼容不同的样式，所以计算body的宽和高时，不能用常量来计算，不然不好扩展，所以就用到了动态获取宽和高的方法来实现。

分享到：

CSS3圆角

2012-09-24 14:20
浏览 1196
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论