标签:
点击链接!欢迎大家访问
下面是网页一些常见的宽高的获取。。。。。。。。。这是原生的写法(JavaScript)
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
接下来是jquery的写法
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height()); //浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width()); //浏览器当前窗口文档对象宽度 alert($(document.body).width()); //浏览器当前窗口文档body的高度 alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
原生滚动事件的一些数据计算-------------什么时候到顶部了,居顶部有多少。。。
window.onscroll = function(){ var scrollT = document.documentElement.scrollTop||document.body.scrollTop; //居上滚动了多少高度 var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight; //页面总高度 var clientH = document.documentElement.clientHeight||document.body.clientHeight; //页面可视区域的高度 var s1=document.getElementById("s1").offsetTop; //元素距顶部有多少像素 if(scrollT == scrollH - clientH){ alert("到底部了"); }else if(scrollT == 0){ alert("到顶部了"); }
jquery滚动常见的一些数据获取。。。
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内,默认TRUE
options.padding 是否把padding计算在内,默认false
options.margin 是否把margin计算在内,默认true
options.border 是否把边框计算在内,默认true
常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站
标签:
原文地址:http://www.cnblogs.com/null11/p/5719070.html