js应用笔记4

最新推荐文章于 2024-03-08 23:01:16 发布

傲来小神仙

最新推荐文章于 2024-03-08 23:01:16 发布

阅读量208

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/huchaoyue_/article/details/107851979

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

- - - - offset：
        client ：
        scroll
        总结
        元素的几何尺寸
        表单：
        回到顶部：

offset：

属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding 边框内容区的宽度,返回数值不带单位
element.offsetHeight	返回自身包括padding 边框内容区的高度,返回数值不带单位

在这里插入图片描述

offset 与 style 区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
获得的数值没有单位	获得的是带有单位的字符串
offsetWidth包含padding + border + width	style.width获得不包含padding 和 border
offsetWidth等属性是只读属性,只能获取不能赋值	style.width等属性是可读写属性

client ：

属性	作用
element.clientTop	返回元素上边框(border)的大小
element.clientLeft	返回元素左边框(border)的大小
element.clientWidth	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
element.clientHeight	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位

在这里插入图片描述

scroll

属性	作用
element.scrollTop	返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight	返回自身实际的高度,不含边框,返回数值不带单位

在这里插入图片描述

总结

属性	作用
element.offsetWidth	返回自身包括padding 边框内容区的宽度,返回数值不带单位
element.clientWidth	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位

在这里插入图片描述

元素的几何尺寸

rectObject = object.getBoundingClientRect();
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
rectObject.width：元素的宽度 （内容区+padding+border+滚动条）
rectObject.height：元素的高度 （内容区+padding+border+滚动条）

【对比】

offset系列	getBoundingClientRect
offset 的方向值需要考虑到父级。如果父级是定位元素，那么子元素的offset值相对于父元素；如果父元素不是定位元素，那么子元素的offset值相对于可视区窗口。	getBoundingClientRect() 的值只相对于可视去窗口

表单：

document.forms：返回页面中所有表单元素；

表单和表单类元素的属性和方法：

1) 表单.submit()：表单提交；

2) 表单.reset()：表单重置；

3) 元素.type：可读可写，表单元素类型；

4) 元素.form：只读，包含该元素的form表单对象，不存在返回null；

5) 元素.name：可读可写，元素的名称；

6) 元素.value：可读可写，简单理解就是输入框的值；

window.pageYOffset IE9+

document.scrollingElement.scrollTop 有DTD XHTML1.0 html4.0

document.body.scrollTop 没有DTD声明 HTML5

回到顶部：

<body>
    <div id="anchor"></div>
    <div class="box">
        <div>
            <a href="#anchor">锚点链接回顶部</a>
            <button onclick="goTop()">scrollTop属性回顶部</button>
            <button onclick="back()">scrollTo</button>
        </div>
    </div>

    <script>
        function goTop() {
            console.log(document.documentElement.scrollTop);
            document.documentElement.scrollTop = 0;
        }

        function back() {
            window.scrollTo(0, 0);
        }
    </script>
</body>