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 dom 操作详解 js加强
Jul 13 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
Vue学习之组件用法实例详解
Jan 06 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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+APACHE实现网址伪静态
2015/02/22 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
js常用函数 不错
2006/09/08 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
使用Python来开发微信功能
2018/06/13 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python安装pil库方法及代码
2019/06/25 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
最热门的自我评价
2013/12/30 职场文书
旅游安全协议书
2014/04/21 职场文书
银行给客户的感谢信
2015/01/23 职场文书