首页 > 其他分享 >WebAPI_DAY5

WebAPI_DAY5

时间:2023-02-05 13:22:05浏览次数:37  
标签:WebAPI 元素 DAY5 宽高 获取 事件 scroll 加载

滚动事件

当页面进行滚动时触发

目的:页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部

事件名:scroll

window.addEventListener('scroll',function(){})

监听某个元素内部滚动同理




加载事件

加载外部资源(图片、外联CSS和JS等)加载完毕时触发的事件

事件名:load

window.addEventListener('load',function(){})

当初始的HTML文档被完全加载和解析完成后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载

事件名:DOMContentLoaded

一般给document加




元素大小和位置

scroll

获取宽高

获取元素内容总宽高(不包含滚动条),返回值不带单位

scrollWidth和scrollHeight


获取位置

获取元素往左、往上滚出去的距离

scrollLeft和scrollTop

这两个属性可以修改

获取当前页面距离顶端的距离

console.log(document.documentElement.scrollTop);

offset

获取宽高

  • 获取元素的自身宽高、包含元素自身设置的宽高、padding. border
  • offsetWidth和offsetHeight

获取位置

  • 获取元素距离自己定位父级元素的左、上距离
  • offsetLeft和offsetTop 注意是只读属性

client

获取宽高

  • 获取元素的可见部分宽高(不包含边框,滚动条等)
  • clientWidth和clientHeight

获取位置

  • 获取左边框和上边框宽度
  • clientLeft和clientTop 注意是只读属性

标签:WebAPI,元素,DAY5,宽高,获取,事件,scroll,加载
From: https://www.cnblogs.com/exungsh/p/17093246.html

相关文章

  • 20天零基础自学Python | Day5 8大数据类型
    大家好,我是宁一。这节课我们来讲讲python的8大数据类型,已经这些数据类型的区别。1、什么是数据类型上节课说过,后面我们不管是做网站,还是做数据分析,都要处理各种各样的数据,比......
  • 【YBT2023寒假Day5 C】路径计数(数学)(生成函数)
    路径计数题目链接:YBT2023寒假Day5C题目大意有一个h*w的网格,你要从左上角走到右下角,每次可以向右或者向下,定义一条路径的分数是它经过的位置的权值和。每次会选择权......
  • 【YBT2023寒假Day5 B】全面沦陷(tarjan)
    全面沦陷题目链接:YBT2023寒假Day5B题目大意给你一个有向图,问你有多少个点可以到达所有点。一个点x能到达一个点y当且仅当在原图有路径或在把边反向的图中有路径。......
  • drf-day5——反序列化类校验部分源码分析、断言、drf请求、drf响应、视图组件及两个视
    目录一、反序列化类校验部分源码解析(了解)二、断言三、drf之请求3.1Request能够解析的前端传入的编码格式3.2Request类有哪些属性和方法(学过)常用参数Response类的实例化......
  • WebAPI_DAY4
    事件对象(e)常用属性type:当前事件类型clientX/clientY:光标相对于左上角的位置offsetX/offsetY:光标相对于当前DOM元素左上角位置key:用户按下的键盘键的值事件流事件......
  • WebAPI_DAY3
    DOM节点DOM树里每一个内容都称之为节点元素节点:如body、div属性节点:如href、src文本节点:所有的文本其他查找节点节点关系:父节点parentNode属性返回最近......
  • WebAPI_DAY2
    事件编程时系统发生的动作或发生的事情(如单击一个按钮)事件监听程序检测是否有事件产生,一旦事件触发,就立即调用一个函数作出响应,称为注册事件语法元素.addEventListene......
  • Linux学习-DAY5
    一、文件目录管理命令1.touch命令touch命令用于创建空白文件或设置文件的时间,语法格式为“touch[参数] 文件名称”。2.mkdir命令mkdir命令用于创建空白的目录,英文全称为“......
  • WebAPI_DAY1
    WebAPI作用:使用JS去操作html和浏览器分类:DOM(文档对象类型)、BOM(浏览器对象类型)DOM(DocumentObjectModel)浏览器提供的一套专门用来操作网页内容的功能开发网页特效、......
  • Dynamics CRM Online WebAPI
    创建应用1.登录https://portal.azure.com/#home2.选择AzureActiveDirectory3.在注册应用程序页面中输入应用程序的注册信息3.1添加应用程序3.2填写应用程序注册......