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

    1、偏移量  

    偏移量包括元素在屏幕上占用的所有可见的空间,元素的可见大小由其高度和宽度决定。包括所有的内边距、滚动条和边框大小(不包括外边距)。 包括:offsetWidth(元素的宽度、垂直滚动条的宽度、左右边框的高度)、offsetHeight(元素的高度、水平滚动条的宽度、上下边框的宽度)、offsetLeft(元素的左外边框至包含元素的左内边框之间的距离)、offsetTop(元素的上外边框至包含元素的上内边框之间的距离) 注意:offsetLeft和offsetTop属性与包含的元素有关,对于包含元素的引用保存在offsetParent属性中,它不一定与parentNode的值相等。例如<td>的offsetParent是做为其祖先元素的<table>

    要获取元素在页面中的偏移量,就通过这个元素的offsetPatent属性,一值循环到根元素,就可以得到一个基本准确的值。

    2、客户区大小

    客户区大小指的是元素内容及其内边距占据的空间大小,包括clientWidth和clientHeight属性
    
    function getViewport(){
        if(document.compatMode == "BackCompat"){
            return {
                document.body.clientWidth,
                height:document.body.clientHeight
            }
        }else{
            return {
                document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
    }

     3、滚动条大小

    滚动大小:指的是包含滚动内容的元素的大小,包括:
    scrollHeight :在没有滚动条情况下,元素内容的总高度。
    scrollWidth : 在没有滚动条的情况下,元素内容的总宽度。
    scrollLeft : 被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素在水平方向上滚动位置。
    scrollTop : 被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素在垂直方向上滚动位置。
    

     在确定文档的总高度时,通过以下方法

    var docHeight = Math.max(document.documentElement.scroolHeight,document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scroolWidth,document.documentElement.clientWidth);
    
    
    当运行在ie的混杂模式下时,使用document.body
    

      

     

  • 相关阅读:
    移动端支付6位密码框
    移动端canvas刮刮乐
    原生ajax请求json数据
    canvas绘制video
    移动端阻止默认长按选中文本和弹出菜单、点击阴影
    前端移动端相关的代码(pc端与移动端自动切换)
    统一管理网站中的某些需要定期更新的时间届数 倒计时 ( 换届 之类的网站)( 兼容ie )
    Hbuilder 常用快捷键汇总
    文件找不到,路径错误问题
    图片清晰度问题
  • 原文地址:https://www.cnblogs.com/sandianbaozi/p/2794405.html
Copyright © 2011-2022 走看看