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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python 多进程和数据传递的理解
2017/10/09 Python
关于python多重赋值的小问题
2019/04/17 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
物流仓储计划书
2014/01/10 职场文书
勤俭节约倡议书
2014/04/14 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2015年度企业工作总结
2015/05/21 职场文书
学术会议开幕词
2016/03/03 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
详解JAVA的控制语句
2021/11/11 Java/Android
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers