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 Eval 函数使用
Mar 23 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
用PHP连接Oracle数据库
2006/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
中式结婚主持词
2014/03/14 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书