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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python二元算术运算常用方法解析
2020/09/15 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
大学生个人自荐信
2014/02/24 职场文书
化妆品店促销方案
2014/02/24 职场文书
初中学习计划书范文
2014/09/15 职场文书
文体活动总结
2015/02/04 职场文书