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 操作文件 实现方法小结
Jul 02 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
js加减乘除精确运算方法实例代码
Jan 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
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
护士自荐信怎么写
2013/10/18 职场文书
化学教师教学反思
2014/01/17 职场文书
廉洁校园实施方案
2014/05/25 职场文书
优秀班组申报材料
2014/12/25 职场文书
项目验收申请报告
2015/05/15 职场文书
交通事故协议书范本
2016/03/19 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
七年级话题作文之执着
2019/11/19 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Pytest中conftest.py的用法
2021/06/27 Python