<!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的宽和高时,不能用常量来计算,不然不好扩展,所以就用到了动态获取宽和高的方法来实现。
分享到:
相关推荐
KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件,目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY ...
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...
kissy-1.4.8.zip,淘宝最新前端开发包
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布...
Kissy 15天学会.zip欢迎下载!!!
淘宝帮派编辑器 kissy editor 2.0
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
淘宝用过一个很古老的编辑器(至今宝贝发布页面还在用)。去年年底,换用过 YUI 编辑器(让人爱恨交加)。今年,祭出了 FCKEditor. 从纯功能上讲,FCK 是王者。但在国内互联网环境下,FCK 的文件有点大。针对淘宝的...
Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar
淘宝kissy帮助文档 学习文档 用法等
KISSY框架是目前硕果仅存的几个国产js框架之一,在阿里的网站比如淘宝网、天猫等大量使用。
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
异步上传组件uploader基于kissy,拥有flash,iframe,html5三种方式
KISSY Editor 一个小巧灵活的网页编辑器
kissy模块化实践.taobao 前端架构Kissy介绍