- 浏览: 3291871 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
参考网址:http://www.ido321.com/906.html
2015-3-27
$(window).height(); 才是窗口的宽高,而且一直不变
document.body.clientHeight,在文档内容有滚动条的时候远大于$(window).height();
实际例子,向下滑动判断
$(document).height() - $(window).scrollTop() - $(window).height() < 150
2015-3-17
踩了一个大坑,在UC浏览器,window.innerHeight与document.body.clientHeight根本不相等,导致获取错误的高度。
结论:直接使用document.body.clientHeight即可。
另外,screen.availHight是屏幕分辨率1920x1080之类,并不是屏幕viewport尺寸。
一、理论
在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight – 浏览器窗口的内部高度
window.innerWidth – 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
二、测试办法
结果(例子):
正常文档流情况:
h=652
w=1280
document.body.clientHeight=200
document.body.clientWidth=1264
window.innerWidth=1280
window.innerHeight=652
document.documentElement.clientHeight=652
document.documentElement.clientWidth=1280
经测试结论1:
document.body.clientWidth/Height:的宽高偏小,高甚至默认200。
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。
测试结论2:
给.test添加左浮动:float:left,让其脱离正常文档流,看看结果:除了document.body.clientHeight变成了100,其他基本保持不变。
测试结论3:
但是给.data也添加float:left,在对应的浏览器中,document.body.clientHeight变成了0,其他基本保持不变。不信可以自己试试。
三、如何使用知识来改进
1,向显示在移动端怎么办?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
2,如果希望clientWidth/Height与 documentElement.clientWidth、innerWidth 一样怎么办?
设置如下css
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
最关键的是:body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。
所以,需要js+css才能得到正确的结果。
参考网址:http://www.ido321.com/906.html
2015-3-27
$(window).height(); 才是窗口的宽高,而且一直不变
document.body.clientHeight,在文档内容有滚动条的时候远大于$(window).height();
实际例子,向下滑动判断
$(document).height() - $(window).scrollTop() - $(window).height() < 150
2015-3-17
踩了一个大坑,在UC浏览器,window.innerHeight与document.body.clientHeight根本不相等,导致获取错误的高度。
结论:直接使用document.body.clientHeight即可。
另外,screen.availHight是屏幕分辨率1920x1080之类,并不是屏幕viewport尺寸。
一、理论
在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight – 浏览器窗口的内部高度
window.innerWidth – 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
二、测试办法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Cache-Control" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="MobileOptimized" content="320"> <title>Document</title> <style type="text/css"> .test { width:100px; height:100px; background:red; } #data { width:200px; height:100px; } </style> </head> <body> <div class="test">test</div> <div id="data"></div> <script type="text/javascript"> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var data = document.getElementById('data'); data.innerHTML = "正常文档流情况:"+"<br/>"; data.innerHTML += "h="+h+"<br/>"; data.innerHTML += "w="+w+"<br/>"; data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"<br/>"; data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"<br/>"; data.innerHTML += "window.innerWidth="+window.innerWidth+"<br/>"; data.innerHTML += "window.innerHeight="+window.innerHeight+"<br/>"; data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"<br/>"; data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"<br/>"; </script> </body> </html>
结果(例子):
正常文档流情况:
h=652
w=1280
document.body.clientHeight=200
document.body.clientWidth=1264
window.innerWidth=1280
window.innerHeight=652
document.documentElement.clientHeight=652
document.documentElement.clientWidth=1280
经测试结论1:
document.body.clientWidth/Height:的宽高偏小,高甚至默认200。
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。
测试结论2:
给.test添加左浮动:float:left,让其脱离正常文档流,看看结果:除了document.body.clientHeight变成了100,其他基本保持不变。
测试结论3:
但是给.data也添加float:left,在对应的浏览器中,document.body.clientHeight变成了0,其他基本保持不变。不信可以自己试试。
三、如何使用知识来改进
1,向显示在移动端怎么办?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
2,如果希望clientWidth/Height与 documentElement.clientWidth、innerWidth 一样怎么办?
设置如下css
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
最关键的是:body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。
所以,需要js+css才能得到正确的结果。
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2335作者:zccst 纯浏览器端解决办法就是轮询,img轮询和a ... -
scroll时判断向下滚动还是向上滚动
2015-03-30 16:53 38212作者:zccst 有时候需要用到,判断页面是向上还是向下滚动 ... -
[BOM]navigator知识点
2015-03-20 14:42 4815作者:zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5273作者:zccst navigator.online属性检测用 ... -
Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList
2015-01-05 15:38 7525作者:zccst 这个问题如 ... -
doctype和compatModel相关
2015-01-04 19:30 678作者:zccst 一、doctype 1,严格模式与混杂模 ... -
window.history
2014-12-23 10:37 9990作者:zccst 旧版: f ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129477作者:zccst reload 方法,该方法强迫浏览器刷新当 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22401作者:zccst 原坑: get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数,如offset,ownerDocument
2014-10-08 17:07 4212作者:zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 897作者:zccst 2015-3-11 JavaScript ... -
[Event]事件(高程版)(二)事件处理程序
2014-06-17 18:00 729作者:zccst <input type=" ... -
[Event]事件(高程版)(一)事件类型
2014-06-17 17:59 667作者:zccst 一、UI事件 1,load 两种添加方式 ... -
target与currentTarget的区别(jqueryui方式获取z-Index)
2014-06-17 12:00 15876作者:zccst 2014-6-25 今天看了jQuery ... -
JSONP原理及实现
2014-06-09 16:47 12286作者:zccst 2015-04-30 更新 跨域实现的 ... -
事件基础(高程版)
2014-06-09 16:37 980作者:zccst 2014-5-4 一、事件流 标准:DOM ... -
DOM0-节点关系,节点操作API
2014-06-09 15:29 913作者:zccst 2014-09-20 补 ... -
document操作iframe
2013-12-13 16:26 1220作者:zccst //在iframe内获取父页面节点 win ... -
js-location对象
2013-12-11 17:05 1460zccst总结 2015-04-14 获取location的 ... -
document.body.scrollTop和document.documentElement.scrollTop
2013-09-14 14:44 1330作者:zccst 网页可见区域宽: document.bo ...
相关推荐
} else if(document.body.scrollHeight > document.body.offsetHeight) { // all but IE Mac scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { /...
在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/...
document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth ...
取得窗口大小的代码: 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != “number”){ if(document.compatMode == “number”){ pageWidth = document....
Chrome: document.body.scrollTop Firefox: document.documentElement.scrollTop Safari: window.pageYOffset 我这里是局部元素滚动,因此稍有差异。先附上html及css代码块: scroll-content为滚动区域, ...
JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍。 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> ...
document.body.appendChild(back); clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); o.style.display = "block"; o.style...
JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍。 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> ...
let maxH = document.documentElement.clientHeight - 50, maxW = document.documentElement.clientWidth - 50; //监听resize,改变maxH,maxW window.onresize = function(){ maxH = document....
代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window...
本文实例讲述了js检查是否关闭浏览器的方法。分享给大家供大家参考,具体如下: //关闭浏览器提示信息 ... document.body.clientHeight : 0, document.documentElement ? document.documentElement.clientHeight :
本文实例讲述了JS关闭... var pageWidth = Math.max(window.top.document.body.scrollWidth, window.top.document.documentElement.scrollWidth); var pageHeight = Math.max(window.top.document.body.scrollHeight,
用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况,这时候大屏幕下... clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; if (!client
还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试... return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:e.clientY+document.body.scrollTop+document.document
h = document.documentElement, b = k.replace(/./, function (a) { return a[0].toUpperCase() }); return void 0 === n ? this[0] == window ? h['client' + b] : this[0] == document ? Math.max(c['scroll'...
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: ... var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.do
获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 <body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);...
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } gapx = (posx-...
如下所示: screen.width ...window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth || document.documentElement.clientWidth || docum
img.getBoundingClientRect().top + document.body.scrollTop||document.documentElement.scrollTop (3)判断img出现的位置是否在可见区域里: .在浏览器的可见区域,justTop>scrollTop&&offsetTop<...