• 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不会冒泡
  • 相关阅读:
    Axure基础详解二十二:随机点名效果
    哥斯拉加密WebShell过杀软
    nginx降权+匹配php
    【软件测试】03 -- 软件测试概述
    VUE3中 reacitive源码理解
    数据库字段命名
    win32-注册表-32位-64位-读写值-Qt-C++
    Jmeter配置脚本录制进行抓包并快速分析、定位接口问题
    【机器学习】(基础篇二) —— 监督学习和无监督学习
    直线段扫描算法
  • 原文地址:https://blog.csdn.net/Z933143298/article/details/125471370