js应用笔记4

文章目录

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

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

js应用笔记4_第1张图片

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_第2张图片

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

js应用笔记4_第3张图片

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

js应用笔记4_第4张图片

js应用笔记4_第5张图片

元素的几何尺寸
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>

你可能感兴趣的:(笔记)