web开发中获取的各种高度和宽度

2 篇文章 0 订阅

前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 还有 jQuery 获取这些尺寸.

1.简介

一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里向外便是 页面 , 浏览器 , 屏幕 三者. 
展示图: 
这里写图片描述

2.屏幕尺寸

屏幕尺寸的获取

  • screen.availHeight:屏幕可用高度
  • screen.availWidth:屏幕可用宽度
  • screen.Height:屏幕高度
  • screen.Width:屏幕宽度

3.浏览器尺寸

获取浏览器尺寸 
window.outerHeight:浏览器高度 , 此高度包含了水平滚动条的高度(若存在)。 
window.outerWidth:浏览器宽度 
window.innerHeight:页面可用高度 
window.innerWidth:页面可用宽度 
window.outerHeight - window.innerHeight:工具栏高度

4.页面尺寸

页面尺寸 
body.clientHeight:网页可见区域高度 
body.clientWidth:网页可见区域宽度 
body.offsetHeight:网页可见区域高度(包括边线的高) 
body.offsetWidth:网页可见区域宽度(包括边线的宽) 
window.innerHeight - body.clientHeight:滚动条高度

5. jQuery 获取各种宽度和高度

浏览器可视区域

$(window).height()
$(window).width()
 
 
  • 1
  • 2

页面的文档尺寸

$(document).height()
$(document).width()
 
 
  • 1
  • 2

当前窗口文档body的尺寸

$(document.body).height()
$(document.body).width()
 
 
  • 1
  • 2

滚动条到顶部的垂直高度 (即网页被卷上去的高度)

$(document).scrollTop()
$(document).scrollLeft()
 
 
  • 1
  • 2

Reference 
我们都是从菜鸟开始的blog 
jQuery的各种宽度和高度

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值