zoukankan      html  css  js  c++  java
  • js获取浏览器和元素对象的尺寸

    1.屏幕尺寸
    1 window.screen.height               //屏幕分辨率的高
    2 window.screen.width                //屏幕分辨率的宽
    3 window.screen.availHeight          //屏幕可用工作区的高
    4 window.screen.availWidth           //屏幕可用工作区的宽
    2、window对象尺寸
    1  //获取窗口中文档显示区域的宽度及高度(兼容IE与DOM浏览器):
    2  window.innerWidth ? window.innerWidth : document.body.clientWidth;
    3  window.innerHeight ? window.innerHeight : document.body.clientHeight;
    4  
    5 //innerHeight:窗口中文档显示区域的高度,不包括菜单栏、工具栏等部分,可读可写。IE不支持,IE中body元素的clientHeight与该属性相同。
    6 //innerWidth:窗口中文档显示区域的宽度,该属性可读可写。IE不支持,IE中body元素的clientWidth与该属性相同。clientHeight与clientWidth属性是只读的。
    3、元素对象尺寸
    • offsetWidth (width+padding+border)当前对象的宽度。

      style.width也是当前对象的宽度(width+padding+border)。区别:

      1)style.width返回值除了数字外还带有单位px;
      2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;
      3)如果没有给HTML元素指定过width样式,则style.width 返回的是空字符串

    • offsetHeight :(Height+padding+border)当前对象的高度。

      style.height也是当前对象的高度(height+padding+border)。区别:

        1)style.height返回值除了数字外还带有单位px;
           )如对象的高度设定值为百分比高度,则无论页面变高还是变矮,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值;
          3)如果没有给HTML元素指定过height样式,则style.height返回的是空字符串

    1 scrollWidth     //获取对象的滚动宽度 
    2 scrollHeight    //获取对象的滚动高度
    3 clientWidth     //获取对象可见内容的宽度,不包括滚动条,不包括边框
    4 clientHeight    //获取对象可见内容的高度,不包括滚动条,不包括边框
    4、元素对象偏移属性
    1 offsetLeft      //当前对象到偏移参考父元素左边的距离,不能对其进行赋值,设置对象到父元素左边的距离用style.left
    2 offsetTop       //当前对象到偏移参考父元素顶部的距离,不能对其进行赋值,设置对象到父元素顶部的距离用style.top
    3 offsetParent    //当前对象的偏移参考父元素
  • 相关阅读:
    PHP 5.5.0 Alpha5 发布
    Ubuntu Touch 只是另一个 Android 皮肤?
    MariaDB 10 已经为动态列提供文档说明
    Percona Toolkit 2.1.9 发布,MySQL 管理工具
    Oracle Linux 6.4 发布
    Ruby 2.0.0 首个稳定版本(p0)发布
    Apache Pig 0.11.0 发布,大规模数据分析
    Node.js 0.8.21 稳定版发布
    红薯 MySQL 5.5 和 5.6 默认参数值的差异
    Django 1.5 正式版发布,支持 Python 3
  • 原文地址:https://www.cnblogs.com/wuln/p/7195057.html
Copyright © 2011-2022 走看看