jquery BS,dialog控件自适应大小


Posted in Javascript onJuly 06, 2009

样式有点丑,为此,还重搞了个样式,哪知以为完工的时候,发现IE上工作不正常,自适应大小等无法实现。

原来它需要xhtml才行,而公司的产品是html的。为此,研究了一下自适应大小的实现。

原来一直觉得jquery取宽度高度很神奇,原来是直接取的dom中element的offsetWidth/offsetHeight等属性,当有element插入dom中,浏览器就会根据规则计算出相应的属性,这里抄几个相关的属性。

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。

clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

clientWidth、offsetWidth、clientHeight..区别

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。

研究了下实现不了的原因。原来是jquery.alerts控件里面全是div的,简单的HTML在IE里,div的宽度似乎不根据内部内容变大而变大,直接有多大就多大,这样取到的offsetWidth就很大了,自适应大小就没实现,当然XHTML的情况取offsetWidth就可以了。

看了下EXT的实现方式,它就聪明多了,内部内容用span等随内容大小变化的el,这样取到offset属性就真实了,然后将内部一个个el的宽度都加上,包括padding和border,算出外层的总宽度。

虽然也想简单用xhtml,但没办法。还是学EXT,虽然麻烦一些,但可靠。

Javascript 相关文章推荐
javascript 防止刷新,后退,关闭
Aug 07 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 #Javascript
javascript 写类方式之十
Jul 05 #Javascript
javascript 写类方式之九
Jul 05 #Javascript
javascript 写类方式之八
Jul 05 #Javascript
javascript 写类方式之七
Jul 05 #Javascript
javascript 写类方式之六
Jul 05 #Javascript
javascript 写类方式之五
Jul 05 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
中软国际Java程序员机试题
2012/08/19 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
消防器材管理制度
2014/01/28 职场文书
会计专业自我鉴定
2014/02/10 职场文书
战友聚会策划方案
2014/06/13 职场文书
工会工作先进事迹
2014/08/18 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
音乐之声观后感
2015/06/04 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL