• 其它样式相关属性

    clientWidth和clientHeight

    语法：元素.clientWidth;   元素.clientHeight

    • 这两个属性可以获取元素的可见宽度和可见高度
    • 这两个属性获取的高度和宽度都是不带px的，返回的是一个数字，可以直接进行运行算
    • 获取到的高度和宽度包括内容区和内边距，不包括滚动条
    • 这两个属性都是只读的，不能修改
    1. alert(box1.clientWidth);
    2. alert(box1.clientHeight);

    offsetWidth和offsetHeight 

     语法：元素.offsetWidth;   元素.offsetHeight 

    这两个属性可以获取元素的整个高度和宽度，包括内容区、内边距和边框

    1. alert(box1.offsetWidth);   
    2. alert(box1.offsetHeight); 

    offsetParent

    语法：元素.offsetParent

    • 该属性可以获取当前元素的定位父元素
    • 会获取到离当前元素最近的开启了定位的祖先元素
    • 如果所有的祖先元素都没有开启定位，则返回body
    alert(box1.offsetParent);

    offsetLeft和offseTop 

    语法：元素.offsetLeft;   元素.offsetTop

    这两个属性可以获取当前元素相对于其定位父元素的水平偏移量（offsetLeft）和当前元素相对于其定位父元素的垂直偏移量（offseTop ）

    1. alert(box1.offsetLeft);   
    2. alert(box1.offsetTop)

    scrollWidth和scrollHeight 

     语法：元素.scrollWidth;   元素.scrollHeight 

    这两个属性可以获取整个滚动区域的宽度和高度

    1. alert(box1.scrollWidth);   
    2. alert(box1.scrollHright)

    scrollLeft和scrollTop 

     语法：元素.scrollLeft;   元素.scrollTop 

    • 这两个属性可以获得水平滚动条滚动的距离（scrollLeft）和垂直滚动条滚动的距离（scrollTop ）
    • 当满足 scrollHeight-scrollTop==clientHeight 时，说明垂直滚动条到底了
    • 当满足 scrollWidth-scrollLeft==clientWidth 时，说明水平滚动条到底了
    1. alert(box1.scrollLeft);   
    2. alert(box1.scrollTop)

    遵守协议练习 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Documenttitle>
    7.     <style>
    8.         *{
    9.             margin: 0%;
    10.             padding: 0%;
    11.         }
    12.         #info{
    13.             width: 300px;
    14.             height: 500px;
    15.             background-color: yellow;
    16.             overflow: auto;
    17.         }
    18.     style>
    19.     <script>
    20.         window.onload = function () {
    21.             //当垂直滚动条滚动到底时，使表单项可用
    22.             //onscroll事件：该事件会在元素的滚动条滚动时触发
    23.  
    24.             //获取info元素
    25.             var info = document.getElementById("info");
    26.             //获取表单项
    27.             var inputs = document.getElementsByTagName("input");
    28.             //为info绑定滚动条滚动事件
    29.             info.onscroll = function(){
    30.                 //检查滚动条是否滚动到底
    31.                 if(info.scrollHeight-info.scrollTop==info.clientHeight){
    32.                     //使表单项可用
    33.                     //disabled属性可以设置一个元素是否禁用
    34.                     //如果设置为true，则元素禁用
    35.                     //如果设置为false，则元素可用
    36.                     inputs[0].disabled = false;
    37.                     inputs[1].disabled = false;
    38.                 }
    39.             };
    40.         };
    41.     script>
    42. head>
    43.  
    44. <body>
    45.     <h3>欢迎亲爱的用户注册h3>
    46.     <p id="info">
    47.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    48.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    49.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    50.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    51.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    52.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    53.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    54.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    55.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    56.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    57.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    58.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    59.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    60.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    61.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    62.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    63.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    64.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    65.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    66.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    67.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    68.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    69.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    70.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    71.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    72.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    73.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    74.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    75.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    76.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    77.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    78.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    79.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    80.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    81.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    82.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    83.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    84.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    85.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    86.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    87.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    88.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    89.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    90.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    91.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    92.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    93.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    94.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    95.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    96.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    97.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    98.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    99.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    100.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    101.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    102.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    103.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    104.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    105.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    106.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    107.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    108.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    109.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    110.         亲爱的用户，请仔细阅读以下协议，否则无法注册
    111.     p>
    112.     
    113.     <input type="checkbox" disabled/>我已仔细阅读协议
    114.     <input type="submit" value="注册" disabled>
    115. body>
    116.  
    117. html>

     

  • 相关阅读:
    搭建docke-cli的调试环境
    罗丹明PEG活性酯 RB-PEG-NHS，罗丹明聚乙二醇活性酯，Rhodamine-PEG-NHS
    微信小程序经纬度转化为具体位置（逆地址解析）
    智慧煤矿/智慧矿区视频汇聚存储与安全风险智能分析平台建设思路
    MSPG3507——蓝牙接收数据显示在OLED，滴答定时器延时500MS
    Java基础： java中的四种引用
    【深度学习实验】循环神经网络（一）：循环神经网络（RNN）模型的实现与梯度裁剪
    Vue面试题-答案、例子
    CVE-2023-5129 libwebp堆缓冲区溢出漏洞影响分析
    QT-事件循环机制
  • 原文地址：https://blog.csdn.net/qq_51088023/article/details/125885794