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 相关文章推荐
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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地址引用(php地址引用的效率问题)
2012/03/23 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Webpack之tree-starking 解析
2018/09/11 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解Django中的form库的使用
2015/07/18 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Django数据库迁移常见使用方法
2020/11/12 Python
python 实现客户端与服务端的通信
2020/12/23 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
即兴演讲稿
2014/01/04 职场文书
超市端午节活动方案
2014/01/23 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
如何写早恋检讨书
2014/09/10 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书