首页 > 其他分享 >【Web API DOM09】元素在页面中尺寸、位置获取

【Web API DOM09】元素在页面中尺寸、位置获取

时间:2024-06-06 09:29:56浏览次数:24  
标签:Web header DOM09 元素 宽高 height 获取 API width

一:如何获取宽高、位置

1 获取元素宽高

offsetWidth和offsetHeight

  • 获取元素自身宽高,包含元素自身内容+padding+border
  • 获取可视宽高;如果盒子隐藏,获取结果为0
  • 获取的是数值型数据

clientWidth和clientHeight

  • 获取元素可见部分宽高(不包含边框、margin、滚动条等)

2 获取元素位置

offsetTop offsetLeft

1 如何用

  • 获取元素有定位的、最近的祖先元素的顶部、以及左边距离
  • 如果都没有定位的祖先元素,则以文档左上角定位为准,返回距离文档顶部以及文档左边距离

重点:offsetTop、offsetLeft为只读属性,而scrollTop、scrollLeft为读写属性;这点要重点记忆、

二:案例:顶部导航条显示与隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .content {
      overflow: hidden;
      width: 1000px;
      height: 3000px;
      background-color: pink;
      margin: 0 auto;
    }

    .backtop {
      display: none;
      width: 50px;
      left: 50%;
      margin: 0 0 0 505px;
      position: fixed;
      bottom: 60px;
      z-index: 100;
    }

    .backtop a {
      height: 50px;
      width: 50px;
      background: url(./images/bg2.png) 0 -600px no-repeat;
      opacity: 0.35;
      overflow: hidden;
      display: block;
      text-indent: -999em;
      cursor: pointer;
    }

    .header {
      position: fixed;
      top: -80px;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: purple;
      text-align: center;
      color: #fff;
      line-height: 80px;
      font-size: 30px;
      transition: all .3s;
    }

    .sk {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin-top: 500px;
    }
  </style>
</head>

<body>
  <div class="header">我是顶部导航栏</div>
  <div class="content">
    <div class="sk">秒杀模块</div>
  </div>
  <div class="backtop">
    <img src="./images/close2.png" alt="">
    <a href="javascript:;"></a>
  </div>
  <script>
    const header = document.querySelector('.header')
    const sk = document.querySelector('.sk')
    window.addEventListener('scroll', function () {
      const n = document.documentElement.scrollTop
      header.style.top = n > sk.offsetTop ? 0 : '-80px'
    }
    )
  </script>
</body>

</html>

利用“秒杀模块”距离页面顶部距离,以及html页面滚动距离相比较;当滚动距离相等时,就显示.header盒子,否则隐藏

样式

标签:Web,header,DOM09,元素,宽高,height,获取,API,width
From: https://blog.csdn.net/qq_67896626/article/details/139443730

相关文章

  • XML-RPC实现WebService简单PHP程序示例 及 Closure闭包中的bind与bindTo方法的区别
    一、XML-RPC实现WebService简单PHP程序示例    WebService就是为了异构系统的通信而产生的,它基本的思想就是使用基于XML的HTTP的远程调用提供一种标准的机制,而省去建立一种新协议的需求。目前进行WebService通信有两种协议标准,一种是XML-RPC,另外一种是SOAP。XML-RPC比较......
  • 【Web API DOM10】日期(时间)对象
    一:实例化1获取系统当前时间即创建日期对象constdate=newDate()console.log(date)2024年6月5日周三 2获取指定的时间以获取2025年6月29日为例constdate=newDate('2025-6-29')console.log(date)二:日期对象方法1使用场景:日期对象返回数据如上图,无法直接使......
  • 强!推荐一款开源接口自动化测试平台:AutoMeter-API !
    在当今软件开发的快速迭代中,接口自动化测试已成为确保代码质量和服务稳定性的关键步骤。随着微服务架构和分布式系统的广泛应用,对接口自动化测试平台的需求也日益增长。今天,我将为大家推荐一款强大的开源接口自动化测试平台:AutoMeter-API。1、介绍AutoMeter-API是一款专为测......
  • WebApi过滤器初学习
    WebApi过滤器AuthorizationFilters//权限验证ResourceFilters//资源验证常被用于缓存ModelBinding//模型绑定ActionFilters//行为常被用于模型验证和日志记录ExceptionFilters//异常处理常被用于错误日志ResultFilters//结果验证用于三种......
  • web 关于CSS
    我主要将两个好理解的:1这个代码是直接写在html里的,这个是不安全的。还有这个是在<head>标签下的。<styletype="text/css">body{background-image:url('images/background2.jpeg');background-size:cover;line-height:2;}.center-text{text-align:......
  • api是什么意思?
    api是什么意思API(ApplicationProgrammingInterface)的全称是应用程序编程接口,它是一种允许不同软件应用程序之间进行交互和通信的机制。API通常以网络请求的形式出现,通过预定义的函数和协议,使得开发人员能够访问和操作软件系统的某些功能或数据,而无需了解其内部工作机制的细节。......
  • Vue 3 Composition API与Hooks模式
    Vue3的CompositionAPI引入了Hook函数的概念,这是一种更加模块化和可重用的状态管理和逻辑组织方式。自定义Hook首先,我们创建一个自定义Hook,例如useCounter,它封装了计数器的逻辑://useCounter.jsimport{ref}from'vue';exportfunctionuseCounter(){c......
  • 最新OpenAI免费API-openai api key获取方式
    最近又开始准备LLM应用开发,要用到apikey,才发现过我之前免费发放的额度没了!我都没咋用过,痛心......
  • 【compshare】(3):使用UCloud(优刻得)的compshare算力平台,新增加SD-webui和大模型镜像,可
    关于UCloud(优刻得)旗下的compshare算力共享平台https://www.ucloud.cn/UCloud(优刻得)是中国知名的中立云计算服务商,科创板上市(股票代码:688158),中国云计算第一股,专注于提供可靠的企业级云服务,包括云服务器、云主机、云数据库、混合云、CDN、人工智能等服务。compshare......
  • JavaWeb_MySQL数据库
    数据库:MySQL数据模型:    MySQL是关系型数据库。SQL:简介分类:数据库设计-DDL对数据库操作:表操作:小练习:    创建下表SQL代码:createtabletb_user(idintprimarykeyauto_incrementcomment'ID,唯一标识',usernameva......