zoukankan      html  css  js  c++  java
  • 关于offset client style scroll 的区别与练习

     <!--
             三大系列对比:
                1 client 系列
                    element.clientTop 返回元素上边框大小
                    element.clientLeft 返回元素左边框大小
                    element.clientWidth 返回自身包括padding ,内容区宽度 ,不含边框,返回值不带单位
                    element.clientHeight
                    与offset区别  offsetWidth offsetHeight 返回值包括边框
                2 offset系列
                    offsetTop
                    offsetLeft
                    offsetWidth   返回元素宽度   包括padding  border width
                    offsetHeight  返回元素高度   包括padding  border height
                    offsetParent  返回带有定位的父元素  如果没有 返回body
                    offset 与 style 的区别
                    offset可以获取任意样式表的样式值             style只能得到行内样式表的样式值
                    offset获得的数值是没有单位的                 style.width获得的是带有单位的字符串
                    offsetWidth包含boeder padding width         style.width 获得不包含padding和border的值
                    offsetWidth 等属性是只读属性,只能获取不能赋值 style.width是可读写属性,可以获取也可以赋值
                3 scroll系列  可以触发scroll事件
                    element.scrollTop 返回被卷去的上侧距离 返回数值不带单位  元素距离盒子上侧的距离
                    element.scrollLeft 返回被卷区的左侧距离    元素距离盒子左侧的距离
                    返回的是实际内容的大小,与client的区别
                    element.scrollWidth 返回自身实际的宽度,不含边框   指的内容溢出是的内容的高度
                    element.scrollHeight 返回自身实际的高度 不含边框
       4 获取页面卷区的高度与宽度
        window.pageYOffset
        window.pageXOffset  
         -->
  • 相关阅读:
    固定textview大小,根据文字多少调整字体自适应textview大小
    这可能是最全的禁用win10自动更新了
    Android Studio 3.0正式版填坑之路
    android studio 3.0之后版本自定义文件名生成apk文件
    Android Studio从2.3升级到3.1注意事项
    Android studio2.3.3升级3.1.2坑
    iterm2 快捷键大全
    php实现的短网址算法分享
    mysql远程连接命令
    Mac下安装与配置Go语言开发环境
  • 原文地址:https://www.cnblogs.com/xu3241/p/13255268.html
Copyright © 2011-2022 走看看