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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 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使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
取选中的radio的值
2010/01/11 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
浅析Python 条件控制语句
2020/07/15 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
试用期转正员工自我评价
2014/09/18 职场文书