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 保存数组到Cookie的代码
Apr 14 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
bootstrap表单示例代码分享
May 18 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
深入了解js原型模式
May 30 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
python求斐波那契数列示例分享
2014/02/14 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Numpy数组的广播机制的实现
2020/11/03 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
青年文明号服务承诺
2014/03/31 职场文书
客房服务员岗位职责
2015/02/09 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL