码迷,mamicode.com
首页 > 编程语言 > 详细

常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

时间:2016-07-29 18:38:48      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

我的个人网站

点击链接!欢迎大家访问

下面是网页一些常见的宽高的获取。。。。。。。。。这是原生的写法(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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!