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获得CheckBoxList选中的数量
Oct 27 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
vue中destroyed方法的使用说明
Jul 21 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
python制作一个桌面便签软件
2015/08/09 Python
python的unittest测试类代码实例
2017/12/07 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
基于python检查矩阵计算结果
2020/05/21 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
学生会辞职信
2015/03/02 职场文书
工作调动申请报告
2015/05/18 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL