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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
纯JS实现五子棋游戏
May 28 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的session cookie错误
2009/08/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python之str操作方法(详解)
2017/06/19 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Android分包MultiDex策略详解
2017/10/30 Python
python读写csv文件实例代码
2019/07/05 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
科学发展观演讲稿
2014/09/11 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
师德培训心得体会2016
2016/01/09 职场文书