• 308节---------6月26日


    PC端网页特效

    元素偏移量offset系列

    offset概述

    使用offet系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

    • 获得元素距离带有定位父元素的位置
    • 获得元素自身的大小
    • 注意:返回的数值不带单位

    offset系列常用属性

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

    offset和style的区别

    offsetstyle
    可以获得任意样式表中的样式值只能获得行内样式表中的样式值
    获得的数值是没有单位的style.width获得的是带有单位的字符串
    offsetWidth包含padding+border+widthstyle.width不好喊padding和border的值
    offsetWidth是只读属性,不能赋值style.width时可读写属性,可以获取可以赋值
    获取元素大小位置用offset想给元素改值用style

    元素可视区client系列

    翻译过来就是客户端,使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到钙元素的边框大小、元素大小。

    client系列属性

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


    元素滚动scroll系列

    翻译过来就是翻滚的,我们是用的scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

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

    mouseenter和mouseover的区别

    放鼠标移动到元素上时,就会触发mouseenter事件,类似于mouseover

    • mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。
    • mouseenter只会经过自身盒子触发
    • 之所以这样,就是因为mouseenter不会冒泡
  • 相关阅读:
    IDEA无法查看源码是.class,而不是.java解决方案?
    学习vue3
    银行面试加密算法之DES算法
    Unity简单实现对话功能
    C++ 函数重载
    学习潘海东博士的《潮汐调和分析原理和应用》
    【Matlab】蒙特卡罗法模拟圆周率+对应解析的GIF生成【超详细的注释和解释】
    C++:C++入门基础
    Python笔记六之多进程
    商业智能BI的未来,如何看待AI+BI这种模式?
  • 原文地址:https://blog.csdn.net/Z933143298/article/details/125471370