javascript知识点收藏


Posted in Javascript onFebruary 22, 2007

1.四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。

2.JS取clientHeight与scrollTop
先来段数据,下表的值为document.body.clientHeight / document.documentElement.clientHeight

             IE               FF
Html       608/0          630/11096
Xhtml     10942/591    11076/630

在html/xhtml与ie/ff这4种排列组合下,取得的clientHeight几乎没有一样的,可见写一段兼容3种浏览器两种页面标准的js脚本有多头疼。

暂时总结的判断方法如下:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最终结果比较一致

安全的取到scrollTop:
document.body.scrollTop + document.documentElement.scrollTop

判断浏览器的类型,这种写法挺喜欢的:
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

3.js取到flash对象方法汇总

IE, FF, Maxthon用document.getElementById(id)
Opera用 document.embeds(id)

var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;

if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}

4.js执行顺序
1.同级的不同的代码块,代码块间的执行顺序为从上到下;
2.在代码中嵌入代码的情况下,先执行上层代码块,再执行子代码块;代码中嵌入代码
是指一个文件引入另一个文件,而不是指所有的通过document.write形式打出的代码。

Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 #Javascript
用YUI做了个标签浏览效果
Feb 20 #Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 #Javascript
初探jquery——表单应用范例
Feb 20 #Javascript
动态调用css文件——jquery的应用
Feb 20 #Javascript
js压缩利器
Feb 20 #Javascript
通过jquery实现tab标签浏览效果
Feb 20 #Javascript
You might like
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python多线程下信号处理程序示例
2019/05/31 Python
Django中URL的参数传递的实现
2019/08/04 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
宣传普通话标语
2014/06/27 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
党课主持词大全
2015/06/30 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python