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 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
详解Vue源码中一些util函数
2019/04/24 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
老师给学生的表扬信
2014/01/17 职场文书
合作协议书怎么写
2014/04/18 职场文书
保护环境建议书400字
2014/05/13 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
网聊搭讪开场白
2015/05/28 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
python计算列表元素与乘积详情
2022/08/05 Python