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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
javascript中"/"运算符常见错误
Oct 13 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
小程序实现侧滑删除功能
Jun 25 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
Phpbean路由转发的php代码
2008/01/10 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python中的匿名函数使用简介
2015/04/27 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python docx库用法示例分析
2019/02/16 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python基于execjs运行js过程解析
2020/11/27 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
干部考核评语
2014/04/29 职场文书
三孔导游词
2015/02/05 职场文书
学校中秋节活动总结
2015/03/23 职场文书
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技