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实现图片轮换效果代码
Apr 16 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
详解在React里使用"Vuex"
Apr 02 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
js实现九宫格布局效果
May 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入门小知识
2008/03/24 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
js 走马灯简单实例
2013/11/21 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python绘制数码晶体管日期
2021/02/19 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
高中军训感言800字
2014/03/05 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python