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

前言

页面尺寸事件

语法

检测屏幕宽度

获取宽高

元素尺寸的位置

总结

示例代码

阻止默认行为

阻止冒泡

语法

阻止冒泡如何做

阻止元素默认行为如何做

总结

前言

晚上好各位

页面尺寸事件

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

语法

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()

})