当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript知识点收藏

Javascript
Javascript初学者实例教程(10):图像属性
FF与IE下javascript计算屏幕尺寸
可输入的下拉框
超强图片数量上传无限制
提高代码性能技巧谈—以创建千行表格为例
让插入到 innerHTML 中的 script 跑起来的实现代码
自动设为主页
脚本写的IE右键助手
[原创]checkbox实现全选的多种方法 不断更新
Div+CSS+JS树型菜单,可刷新
CSS+JS构建的图片查看器
如何实现iframe(嵌入式帧)的自适应高度
颜色渐变效果
一条一条新闻向上的滚动 不错
模拟抽奖
[原创]用srcElement实现添加效果
获取对象
带Checkbox的列表框
[原创]图片分页查看
[原创]手机号码本地检测

Javascript 中的 javascript知识点收藏


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 301 ::
收藏到网摘: n/a

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形式打出的代码。