欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js应用笔记4

程序员文章站 2024-02-25 18:08:33
...

文章目录

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

js应用笔记4

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,内容区的宽度,不含边框,返回数值不带单位

js应用笔记4

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

js应用笔记4

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

js应用笔记4

js应用笔记4

元素的几何尺寸
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>
相关标签： 笔记

上一篇： 结合PHP脚本添加和查询MySQL数据的基本教程

下一篇： C#基础知识系列八const和readonly关键字详细介绍

推荐阅读