zoukankan      html  css  js  c++  java
  • javascript 元素的大小

    1、偏移量

    元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(不包含外边距)。通过下列4个属性可以获取元素的偏移量:

    offsetHeight:

    offsetWidth:

    offsetLeft:元素的左外边框包含元素的左内边距的像素距离;

    offsetTop:元素的上外边框至包含元素上内边距的像素距离。

    其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。

    2、客户区大小

    元素的客户区大小,指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。

    其中,clientWidth属性是元素内容区宽度加上左右内边距宽度;clientHeight属性是元素内容区高度加上上下内边距高度。

    clientWidth = padding + width;

    clientHeight = padding + height;

    客户区大小就是元素内部的空间大小,因此滚动条占用的空间不在内。要确定浏览器的视口大小,可以使用document.documentElement或document.body的clientWidth和clientHeight。

    3、滚动大小

    滚动大小指的是包含滚动内容的元素的大小。有些元素,即使没有执行任何代码也能添加滚动条;但另外一些元素,则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。

    scrollHeight:在没有滚动条的情况下,元素内容的总高度

    scrollWidth:在没有滚动条的情况下,元素内容的总宽度

    scrollLeft:被隐藏在内容区域左侧的像素数

    scrollTop:被隐藏在内容区域上方区域的像素数

    scrollWidth和scrollHeight主要用于确定元素内容的实际大小。通常认为<html>元素是在web浏览器的视口中滚动的元素。因此,带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

  • 相关阅读:
    30个php操作redis经常用法代码样例
    Android语音播报、后台播报、语音识别
    Gym 100733J Summer Wars 题解:灵活运用扫描线的思想
    如何运营一个软件微社区
    关于迭代测试的一些思考
    DirectUI界面编程(五)WindowImplBase的使用
    Zxing实现在线二维码生成程序
    Java二维码生成与解码工具Zxing使用
    DirectUI界面编程(四)界面布局详解
    软件开发中的资源管理
  • 原文地址:https://www.cnblogs.com/WaTa/p/5565064.html
Copyright © 2011-2022 走看看