美文网首页
获取屏幕高度等

获取屏幕高度等

作者: 海子小夜曲 | 来源:发表于2018-12-11 19:33 被阅读0次

offsetLeft 可以获取某个表签到定位父盒子之间的距离

得到的是数值类型,是只读的.不能改变.

运动公式

元素的位置(新的)=元素位置(旧的)+步长

leader=leader + step

offsetLeft计算方式:

当前元素的左边框到定位的父盒子的左边框之间的距离.

边框到边框.

由于盒子的位置可能无法整除步数,这时无法直接运动到指定位置

有可能leader!=target 永远成立.

我们需要判断leader和target之间的距离,与step之间的关系.

1,如果leader与target的距离大于1步,正常走.

2,如果leader与target的距离小于1步,直接走到target位置.

offsetWidth, 元素的真实宽度(除了margin以外),值是数值类型,只读.

如果多次设置不同盒子的运动,只是后面的运动会清除掉前面设置的运动效果.

造成这一问题的原因,是animate函数依赖于外部全局变量timer

设置局部变量也不可以,自己的多次点击,还是可以加速.

我么可以给每个标签设置自定义属性.用于保存自身运动时的定时器id.

缓动时

offsetLeft这种取值方式会四舍五入

造成影响

对step进行取整操作

根据step的正负

step=step>0? Math.ceil(step):Math.floor(step)

step=Math.ceil(step);

opacity 透明度

异步任务的执行晚于同步任务

offsetLeft 当前元素到定位父盒子距离(得到数值类型)

(边框到边框)

offsetTop 当前元素到定位父元素高度距离(得到数值类型)

offsetWidth 除了margin其他都算

offsetHeight 除了margin其他高度都算

offsetParent 可以获取到当前元素外面的定位父盒子

(定位的)

parentNode父元素一定是亲爹

定位父盒子可能不是,干爹

scroll系列

scrollHeight

内容超出盒子: 从当前元素顶边框内测到内容底部

内容不超出盒子:直接计算边框直接距离

scrollWidth与scrollHeight计算方式相同

scrollTop被卷曲的内容高度

当元素滚动的时候访问scrollTop的值(onscroll)

box.onscroll = function () {

    //内容被滚动超过了顶边框的下侧

    console.log(this.scrollTop);

  };

内容被滚动超过了顶边框的下侧。

scrollLeft的计算方式与scrollTop同理。

如果给document设置onscroll事件,在ie中的支持有问题

获取页面卷曲的高度有许多方式

documentElement是指html标签在里面的写法.不写html,写

documentElement

clientHeight 元素内部空间的高度(height+padding)

scrollHeight的最小值和clientHeight相同

clienWidth同理;

clientLeft clientTop 相当于元素的borderLeft和borderTop(这俩玩意几乎没用)

如果盒子具有左侧滚动条,这时clientLeft会包含滚动条的宽度。

当窗口大小改变时,去获取可视区域的宽高 onresize

1 .clientX与clientY

window.onload=function(){

document.onclick=function(ev){

var oEvent=ev||event; alert(oEvent.clientX+","+oEvent.clientY);

}

}

oEvent.clientX是指鼠标到可视区左边框的距离。 oEvent.clientY是指鼠标到可视区上边框的距离。

2.offsetWidth、offsetHeight、offsetLeft和offsetTop window.onload=function(){

var oDiv=document.getElementById("div1"); alert(oDiv.offsetWidth);

alert(oDiv.offsetHeight);

alert(oDiv.offsetLeft);

alert(oDiv.offsetTop);

}

offsetWidth是指div的宽度(包括div的边框)

offsetHeight是指div的高度(包括div的边框)

offsetLeft是指div到整个页面左边框的距离(不包括div的边框) offsetTop是指div到整个页面上边框的距离(不包括div的边框)

3.scrollTop、scrollLeft、scrollWidth和scrollHeight

scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。 scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。 scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框)

scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)

4.clientWidth、clientHeight、clientLeft和clientTop

clientWidth是指可视区的宽度。

clientHeight是指可视区的高度。

clientLeft获取左边框的宽度。

clientTop获取上边框的宽度。

相关文章

网友评论

      本文标题:获取屏幕高度等

      本文链接:https://www.haomeiwen.com/subject/glnehqtx.html