前端学习-页面尺寸事件以及阻止默认行为(三十三)

目录

前言

页面尺寸事件

语法

检测屏幕宽度

获取宽高

元素尺寸的位置

总结

示例代码

阻止默认行为

阻止冒泡

语法

阻止冒泡如何做

阻止元素默认行为如何做

总结



前言

晚上好各位


页面尺寸事件

会在窗口尺寸改变的时候触发条件

语法

window.addEventListener('resize',function(){//执行的代码})

检测屏幕宽度

window.addEventListener('resize',function(){let w= document.documentElement.clientwidth;console.1og(w)})

获取宽高

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

元素尺寸的位置

使用场景:前面案例滚动多少距离,都是我们自己算的,最好是页面滚动到某个元素,就可以做某些事

简单说,就是通过js的方式,得到元素在页面中的位置

这样我们可以做,页面滚动到这个位置,就可以做某些操作,省去计算了

获取宽高:获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetwidth和offsetHeight获取出来的是数值,方便计算注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

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

总结

1.offsetWidth和offsetHeight是得到元素什么的宽高?

内容+padding+ border

2.offsetTop和offsetLeft 得到位置以谁为准?

带有定位的父级,如果都没有则以 文档左上角 为准

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<!-- 声明文档类型为 HTML5 -->
​
<head><meta charset="UTF-8"><!-- 设置字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置视口,使页面宽度适应设备宽度,并初始缩放比例为 1.0 --><title>页面尺寸事件示例</title><!-- 设置页面标题 --><style>body {font-family: Arial, sans-serif;/* 设置字体为 Arial 或其他无衬线字体 */display: flex;/* 使用 Flexbox 布局 */justify-content: center;/* 水平居中内容 */align-items: center;/* 垂直居中内容 */height: 100vh;/* 设置高度为视口高度的 100% */margin: 0;/* 移除默认的外边距 */background-color: #f0f0f0;/* 设置背景颜色为浅灰色 */}
​#info {text-align: center;/* 文本居中对齐 */background-color: #fff;/* 设置背景颜色为白色 */padding: 20px;/* 设置内边距为 20px */border-radius: 8px;/* 设置圆角为 8px */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* 设置阴影效果 */}
​@media (max-width: 600px) {
​/* 当屏幕宽度小于或等于 600px 时应用以下样式 */#info {padding: 15px;/* 设置内边距为 15px */border-radius: 6px;/* 设置圆角为 6px */}}</style>
</head>
​
<body><div id="info"><!-- 包含显示窗口宽度和高度的段落 --><p>当前窗口宽度: <span id="width">0</span>px</p><!-- 显示当前窗口宽度 --><p>当前窗口高度: <span id="height">0</span>px</p><!-- 显示当前窗口高度 --><p>元素宽度 (offsetWidth): <span id="elementWidth">0</span>px</p><!-- 显示元素的 offsetWidth --><p>元素高度 (offsetHeight): <span id="elementHeight">0</span>px</p><!-- 显示元素的 offsetHeight --><p>元素顶部偏移 (offsetTop): <span id="elementTop">0</span>px</p><!-- 显示元素的 offsetTop --><p>元素左侧偏移 (offsetLeft): <span id="elementLeft">0</span>px</p><!-- 显示元素的 offsetLeft --></div><script>function updateSize() {const width = window.innerWidth;// 获取当前窗口的可视区域宽度const height = window.innerHeight;// 获取当前窗口的可视区域高度document.getElementById('width').textContent = width;// 更新显示窗口宽度的 span 元素内容document.getElementById('height').textContent = height;// 更新显示窗口高度的 span 元素内容
​const infoElement = document.getElementById('info');// 获取 id 为 'info' 的元素const elementWidth = infoElement.offsetWidth;// 获取元素的 offsetWidth(内容 + padding + border)const elementHeight = infoElement.offsetHeight;// 获取元素的 offsetHeight(内容 + padding + border)const elementTop = infoElement.offsetTop;// 获取元素相对于其包含块的顶部偏移量const elementLeft = infoElement.offsetLeft;// 获取元素相对于其包含块的左侧偏移量
​document.getElementById('elementWidth').textContent = elementWidth;// 更新显示元素宽度的 span 元素内容document.getElementById('elementHeight').textContent = elementHeight;// 更新显示元素高度的 span 元素内容document.getElementById('elementTop').textContent = elementTop;// 更新显示元素顶部偏移的 span 元素内容document.getElementById('elementLeft').textContent = elementLeft;// 更新显示元素左侧偏移的 span 元素内容}
​// 初始调用一次updateSize();// 在页面加载时立即调用 updateSize 函数以显示初始窗口大小和元素尺寸
​// 监听窗口大小变化window.addEventListener('resize', updateSize);// 添加事件监听器,当窗口大小发生变化时调用 updateSize 函数</script>
</body>
​
</html>

阻止默认行为

阻止冒泡

我们某些情况下需要阻止默认情况的发生,比如阻止链接的跳转,表单域跳转

语法

<form action="http://www.baidu.com"<input type="submit" value="提交"></form>
​
<script>
​
const form = document.querySelector('form');
​
form.addEventListener('click',function(e){
​
e.preventDefault()
​
})
​

阻止冒泡如何做

事件对象.stopPropagation();

阻止元素默认行为如何做

e.preventDefault();


总结

晚安各位,祝好梦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/14526.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字化转型的三个阶段:信息化、数字化、数智化

在当今快速迭代的数字时代&#xff0c;企业的生存与发展已与数字化转型浪潮紧密相连。数字化转型不仅是对传统业务模式的深度革新&#xff0c;更是企业适应未来市场、提升竞争力的关键路径。这一过程并非一蹴而就&#xff0c;而是循序渐进地分为信息化、数字化、数智化三个阶段…

Spring Boot篇

为什么要用Spring Boot Spring Boot 优点非常多&#xff0c;如&#xff1a; 独立运行 Spring Boot 而且内嵌了各种 servlet 容器&#xff0c;Tomcat、Jetty 等&#xff0c;现在不再需要打成 war 包部署到 容器 中&#xff0c;Spring Boot 只要打成一个可执行的 jar 包就能独…

Python----Python高级(网络编程:网络基础:发展历程,IP地址,MAC地址,域名,端口,子网掩码,网关,URL,DHCP,交换机)

一、网络 早期的计算机程序都是在本机上运行的&#xff0c;数据存储和处理都在同一台机器上完成。随着技术的发展&#xff0c;人 们开始有了让计算机之间相互通信的需求。例如安装在个人计算机上的计算器或记事本应用&#xff0c;其运行环 境仅限于个人计算机内部。这种设置虽然…

JAVA安全—FastJson反序列化利用链跟踪autoType绕过

前言 FastJson这个漏洞我们之前讲过了,今天主要是对它的链条进行分析一下,明白链条的构造原理。 Java安全—log4j日志&FastJson序列化&JNDI注入_log4j漏洞-CSDN博客 漏洞版本 1.2.24及以下没有对序列化的类做校验,导致漏洞产生 1.2.25-1.2.41增加了黑名单限制,…

Kubernetes架构原则和对象设计(三)

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes常见问题解答 本文主要对kubernetes的核心技术概念和核心A…

每日学习 设计模式 五种不同的单例模式

狮子大佬原文 https://blog.csdn.net/weixin_40461281/article/details/135050977 第一种 饿汉式 为什么叫饿汉,指的是"饿" 也就是说对象实例在程序启动时就已经被创建好,不管你是否需要,它都会在类加载时立即实例化,也就是说 实例化是在类加载时候完成的,早早的吃…

Transformer 详解:了解 GPT、BERT 和 T5 背后的模型

目录 什么是 Transformer? Transformer如何工作? Transformer 为何有用? 常见问题解答:机器学习中的 Transformer 在技​​术领域,突破通常来自于修复损坏的东西。制造第一架飞机的人研究过鸟类。莱特兄弟观察了秃鹫如何在气流中保持平衡,意识到稳定性比动力更重要。…

21.2.6 字体和边框

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 通过设置Rang.Font对象的几个成员就可以修改字体&#xff0c;设置Range.Borders就可以修改边框样式。 【例 21.6】【项目&#xff…

1456. 定长子串中元音的最大数目

目录 一、题目二、思路2.1 解题思路2.2 代码尝试2.3 疑难问题 三、解法四、收获4.1 心得4.2 举一反三 一、题目 二、思路 2.1 解题思路 维护一个统计变量&#xff0c;出入时间窗口就判断 2.2 代码尝试 class Solution { public:int maxVowels(string s, int k) {int sum0;i…

[LeetCode]day16 242.有效的字母异位词

242. 有效的字母异位词 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的 字母异位词 示例 1: 输入: s "anagram", t "nagaram" 输出: true示例 2: 输入: s "rat"…

蓝桥杯---力扣题库第38题目解析

文章目录 1.题目重述2.外观数列举例说明3.思路分析&#xff08;双指针模拟&#xff09;4.代码说明 1.题目重述 外观数列实际上就是给你一串数字&#xff0c;我们需要对于这个数据进行一个简单的描述罢了&#xff1b; 2.外观数列举例说明 外观数列都是从1开始的&#xff0c;也…

Linux网卡配置方法

1、查看IP ip a 网卡状态 UP/down 2、查看网关 如果显示route命令未找到需要下载net-tools软件包 route -n 3、查看DNS服务器地址 DNS服务器地址会存放在/etc/resolv.conf文件中 使用cat命令可以查看 cat /etc/resolv.conf 4、修改网卡配置 方法1&#xff09;编…

DeepSeek使用技巧大全(含本地部署教程)

在人工智能技术日新月异的今天&#xff0c;DeepSeek 作为一款极具创新性和实用性的 AI&#xff0c;在众多同类产品中崭露头角&#xff0c;凭借其卓越的性能和丰富的功能&#xff0c;吸引了大量用户的关注。 DeepSeek 是一款由国内顶尖团队研发的人工智能&#xff0c;它基于先进…

消费电子产品中的噪声对TPS54202的影响

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时&#xff0c;也能帮助其他需要参考的朋友。如有谬误&#xff0c;欢迎大家进行指正。 一、概述 在白色家电领域&#xff0c;降压转换器的应用非常广泛&#xff0c;为了实现不同的功能就需要不同的电源轨。TPS542…

无限使用Cursor

原理&#xff1a;运行程序获得15天的免费试用期&#xff0c;重新运行程序重置试用期&#xff0c;实现无限使用。免费的pro账号&#xff0c;一个月有250的高级模型提问次数。 前提&#xff1a;已安装cursor cursor-vip工具&#xff1a;https://cursor.jeter.eu.org?p95d60efe…

Linux之文件IO前世今生

在 Linux之文件系统前世今生&#xff08;一&#xff09; VFS中&#xff0c;我们提到了文件的读写&#xff0c;并给出了简要的读写示意图&#xff0c;本文将分析文件I/O的细节。 一、Buffered I/O&#xff08;缓存I/O&#xff09;& Directed I/O&#xff08;直接I/O&#…

【计组】实验五 J型指令设计实验

目录 一、实验目的 二、实验环境 三、实验原理 四、实验任务 代码 一、实验目的 1. 理解MIPS处理器指令格式及功能。 2. 掌握lw, sw, beq, bne, lui, j, jal指令格式与功能。 3. 掌握ModelSim和ISE\Vivado工具软件。 4. 掌握基本的测试代码编写和FPGA开发板使用方法。 …

扩展知识--缓存和分时复用cpu

在多核CPU中&#xff0c;缓存和分时复用CPU是两个重要的概念&#xff0c;它们分别涉及硬件架构和资源管理策略。以下将从缓存的层次结构、工作原理以及分时复用CPU的概念进行详细解释。 一、多核CPU中的缓存 缓存的定义与作用 缓存&#xff08;Cache&#xff09;是位于CPU与主…

人工智能:从概念到未来

人工智能&#xff1a;从概念到未来 一、引言 在当今数字化时代&#xff0c;人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;已从科幻小说和电影中的幻想逐渐走进现实&#xff0c;成为推动社会进步和经济发展的关键力量。它正在深刻地改变着我们的生活…

nvm:node 版本管理器

一、先安装git Git 安装完成后执行 git --version查看版本号是否安装成功 二、安装nvm &#xff08;参考链接&#xff1a;mac 安装nvm详细教程 - 简书&#xff09; 官网&#xff08;https://github.com/nvm-sh/nvm/blob/master/README.md&#xff09;查看最新版本安装命令 …