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 相关文章推荐
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
详解Vue的sync修饰符
May 15 Vue.js
根据判断浏览器类型屏幕分辨率自动调用不同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动态创建Flash动画
2006/10/09 PHP
多文件上传的例子
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
PHP简单遍历对象示例
2016/09/28 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
学习python (1)
2006/10/31 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
用python实现名片管理系统
2020/06/18 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
《金子》教学反思
2014/04/13 职场文书
给校长的建议书500字
2014/05/15 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
优秀志愿者感言
2015/08/01 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书