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 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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 中执行排序与 MySQL 中排序
2009/04/21 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
Chrome Web App开发小结
2014/09/04 PHP
php简单实现数组分页的方法
2016/04/30 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue按需加载实例详解
2019/09/06 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Django如何实现上传图片功能
2019/08/16 Python
pywinauto自动化操作记事本
2019/08/26 Python
基于python plotly交互式图表大全
2019/12/07 Python
python上selenium的弹框操作实现
2020/07/13 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
物业管理应届生求职信
2013/10/28 职场文书
大学军训感言300字
2014/03/09 职场文书
无传销社区工作方案
2014/05/13 职场文书
报案材料怎么写
2015/05/25 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python