zoukankan      html  css  js  c++  java
  • web开发中获取的各种高度和宽度

    前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 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()

    页面的文档尺寸

    $(document).height()
    $(document).width()

    当前窗口文档body的尺寸

    $(document.body).height()
    $(document.body).width()

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

    $(document).scrollTop()
    $(document).scrollLeft()
  • 相关阅读:
    delphi RTTI 反射技术
    delphi 自我删除和线程池(1000行代码,需要仔细研究)
    寻找两个已序数组中的第k大元素
    OpenCV中的神器Image Watch
    PYTHON 之 【RE模块的正则表达式学习】
    Call U
    微软IE11浏览器的7大变化
    集群应用及运维经验小结
    逆序对:从插入排序到归并排序
    Jquery 图片轮播实现原理总结
  • 原文地址:https://www.cnblogs.com/1512344358qq/p/10363251.html
Copyright © 2011-2022 走看看