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 隐藏和显示 input 默认值示例
Jun 03 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
vue 中filter的多种用法
Apr 26 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
详解vuex状态管理模式
Nov 01 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
php GD绘制24小时柱状图
2008/06/28 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
python删除过期文件的方法
2015/05/29 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
一行python实现树形结构的方法
2019/08/09 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python插件机制实现详解
2020/05/04 Python
Django models文件模型变更错误解决
2020/05/11 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
反对四风自我剖析材料
2014/10/07 职场文书
医院见习报告范文
2014/11/03 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
大连星海广场导游词
2015/02/10 职场文书
七年级作文之游记
2019/12/11 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python