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 克隆数组最简单的方法
Feb 12 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vuex 入门教程
2018/01/10 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python 求定积分和不定积分示例
2019/11/20 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
小学生期末评语大全
2014/04/21 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
表扬稿格式范文
2015/01/16 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle