JS中其他样式相关的属性及滚动条练习

最新推荐文章于 2023-02-12 13:32:17 发布

Fantasc

最新推荐文章于 2023-02-12 13:32:17 发布

阅读量186

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119532877

版权

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

clientWdith和clientHeight这两个属性可以获取元素的可见宽度和可见高度，包括内容区和内边距，返回的是数值，可以直接用来进行运算。通过这两个属性只能读取，不能修改。

clientWdith属性，返回可见宽度，例子如下：

语法：元素.clientWidth
box.clientWidth;

clientHeight属性，返回可见高度，例子如下：

语法：元素.clientHeight
box.clientHeight;

offsetWidth和offsetHeight这两个属性可以获取元素的整个大小，包括内容区、内边距以及边框，返回的是数值，能直接进行运算。通过这两个属性只能读取，不能修改元素的属性。

offsetWidth属性，返回元素的宽度，例子如下：

语法：元素.offsetWidth
box.offsetWidth;

offsetHeight属性，返回元素的高度，例子如下：

语法：元素.offsetHeight
box.offsetHeight;

offsetParent可以获取当前元素的定位父元素，他会获取到离当前元素最近的、开启了定位（只要position的值不是static就开启了定位）的祖先元素，如果所有的祖先元素都没有开启定位，则返回body，例子如下：

语法：元素.offsetWidth
box.offsetWidth;

offsetLeft和offsetTop

offsetLeft属性，当前元素相对于定位父元素的水平偏移量，这里的定位父元素就是通过offsetParent所能获取到的元素，如果所有的祖先元素都没有开启定位，则它的定位父元素为body，例子如下：

语法：元素.offsetLeft
box.offsetLeft;

offsetTop属性，当前元素相对于定位元素的垂直偏移量，定位元素同上，例子如下：

语法：元素.offsetTop
box.offsetTop;

scrollHeight和scrollWidth可以获取到元素整个滚动区域的高度和宽度

scrollHeight属性，可以获取到元素整个垂直滚动区的高度，也就是滚动条可以垂直滚动的最大距离。例子如下

元素.scrollHeight
box.scrollHeight

scrllWidth属性，可以获取到这个元素整个水平滚动去的宽度，也就是滚动条可以水平滚动的最大距离，例子如下：

元素.scrollWidth
box.scrllWidth;

scrollLeft和scrollTop可以获取水平滚动条或者垂直滚动条滚动的距离

scroollLeft属性，可以获取到滚动条水平滚动的距离，例子如下：

元素.scrollLeft
box,scrollLeft;

scrollTop，可以获取到滚动条垂直滚动的距离，用法如下：

元素.scrollTop
box.scrollTop;

判断垂直滚动条或者水平滚动条到底了:
- 当满足scrollHeight减去scrollTop等于clientHeight的时候，说明垂直滚动条滚动到底了
- 当满足scrollWidth减去scrollLeft等于clientWidth的时候，说明水平滚动条滚动到底了

这些属性只能读取，不能进行修改，想要修改只能通过style，这些属性都是不带px的，返回的都是数值，可以直接进行计算

相应的滚动条练习代码如下，注意看注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条的练习</title>
    <style type="text/css">
        #menu{
            width: 337px;
            height: 500px;
            background-color: #faa;
            overflow: auto;//使元素有滚动条
        }
        
    </style>

    <script type="text/javascript">
        window.onload = function(){
            /* 
                当垂直滚动条滚动到底时，让表单项可用
                onscroll
                这个事件会在滚动条滚动的时候被出发
            */
            var menu = document.getElementById("menu");
            //通过元素名，获取表单项，返回的是数组
            var inputs = document.getElementsByTagName("input");
            menu.onscroll = function(){
                //检查滚动条是否滚动到底
                /*  这里要注意，直接减掉menu.scrollTop的话会存在小数，
                    哪怕是有万分之一的数值还在都不算到底，所以响应函数不会被触发
                    所以要用Math.round来对其进行取整 
                */
                if(menu.scrollHeight - Math.round(menu.scrollTop) === menu.clientHeight){
                    // alert("我已经到底了");
                    //设置表单项可用
                    /* 
                        disabled属性可以设置一个元素是否禁用，如果设置为true，则元素禁用，
                        如果设置为false,则设置为元素可用
                    */
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }
            };
        };
    
    </script>
</head>
<body>
    <div id="menu">
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
        这是霸王条款，请仔细阅读，不然后果自负！
    </div>
    <input type="checkbox" disabled="disabled"/>同意协议
    <input type="submit" value="注册" disabled="disabled"/>
</body>
</html>

Fantasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中其他样式相关的属性及滚动条练习

clientWdith和clientHeight这两个属性可以获取元素的可见宽度和可见高度，包括内容区和内边距，返回的是数值，可以直接用来进行运算。通过这两个属性只能读取，不能修改。clientWdith属性，返回可见宽度，例子如下：语法：元素.clientWidthbox.clientWidth;clientHeight属性，返回可见高度，例子如下：语法：元素.clientHeightbox.clientHeight;offsetWidth和offsetHeight这两个属性可以获.
复制链接

扫一扫