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脚本实现Web页面信息交互
Oct 11 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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数据缓存技术
2007/02/14 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php获取apk包信息的方法
2014/08/15 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
实例讲解JavaScript预编译流程
2019/01/24 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Python下载指定页面上图片的方法
2016/05/12 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python requests post多层字典的方法
2018/12/27 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
企业安全生产责任书范本
2014/07/28 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
督导岗位职责
2015/02/04 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python