DOM基本操作4

xiaoxiao2025-09-02  9

查看元素的几何尺寸 domEle.getBoundingClientRect(); 兼容性很好 该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标 height和width属性老版本IE并未实现 返回的结果并不是“实时的”(静态的)

查看元素的尺寸 dom.offsetWidth,dom.offsetHeight

查看元素的位置 dom.offsetLeft, dom.offsetTop

对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。

dom.offsetParent 返回最近的有定位的父级,如无,返回body, body.offsetParent 返回null

让滚动条滚动 window上有三个方法 scroll(),scrollTo(),scrollBy(); 前面两个作用一样。 三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。 区别:scrollBy()会在之前的数据基础之上做累加。 eg:利用scrollBy() 快速阅读的功能

代码: 在html中:

<div style="width: 200px;height:200px;background-color: yellow; position: fixed;top: 900px; right: 100px;border-radius: 50%;color: black; font-size: 60px;font-weight:bold;line-height: 200px;text-align: center;">Start</div> <div style="width: 200px;height:200px;background-color: green; position: fixed;top: 1150px; right: 100px;border-radius: 50%;color: black; font-size: 60px;font-weight:bold;line-height: 200px;text-align: center;">Stop</div>

在js中:

var start = document.getElementsByTagName('div')[0]; var stop = document.getElementsByTagName('div')[1]; var key = true; var timer; start.onclick = function(){ if(key){ timer = setInterval(function(){ window.scrollBy(0,10); },100); key = false; } } stop.onclick = function(){ clearInterval(timer); key = true; }

转载请注明原文地址: https://www.6miu.com/read-5035648.html

最新回复(0)