API-元素尺寸與位置

學習目標：

掌握元素尺寸與位置

學習內容：

元素尺寸與位置
仿京東固定導航欄案例
實現bilibili點擊小滑塊移動效果

元素尺寸與位置：

使用場景：

前面案例滾動多少距離，都是我們自己算的，最好是頁面滾動到某個元素，就可以做某些事。

簡單說，就是通過js的方式，得到元素在頁面中的位置。

這樣我們可以做，頁面滾動到這個位置，就可以做某些操作，省去計算了。
在這里插入圖片描述

獲取寬高：

獲取元素的自身寬高、包含元素自身設置的寬高、padding、border 。

offsetWidth和offsetHeight。

獲取出來的是數值，方便計算。

注意：獲取的是可視寬高，如果盒子是隱藏的，獲取的結果是0。

獲取位置：

offsetLeft和offsetTop 注意是只讀屬性。

獲取元素距離自己定位父級元素的左、上距離。

在這里插入圖片描述

 <title>offsetLeft</title><style>div {position: relative;width: 200px;height: 200px;background: pink;margin: 100px;}p {width: 100px;height: 100px;background: purple;margin: 50px;}</style>
</head><body><div><p></p></div><script>const div = document.querySelector('div')const p = document.querySelector('p')// console.log(div.offsetLeft)//檢測盒子的位置  最近一級帶有定位的祖先元素console.log(p.offsetLeft)</script></body>

element.getBoundingClientRect()

方法返回元素大小及其相對于視口的位置。

在這里插入圖片描述

 <title>獲取元素大小位置的另外方法</title><style>body {height: 2000px;}div {width: 200px;height: 200px;background: pink;margin: 100px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')console.log(div.getBoundingClientRect())</script></body>

小結

offsetWidth和offsetHeight是得到元素什么的寬高？
```
 內容 + padding + border
```

offsetTop和offsetLeft得到位置以誰為準？

帶有定位的父級
如果都沒有則以文檔左上角為準

屬性	作用	說明
`scrollLeft`和`scrollTop`	被卷去的頭部和左側	配合頁面滾動來用，`可讀寫`
`clientWidth`和`clientHeight`	獲得元素寬度和高度	不包含border、margin，滾動條，用于js獲取元素大小，只讀屬性
`offsetWidth`和`offsetHeight`	獲得元素寬度和高度	`包含border、margin，滾動條，只讀`
`offsetTop`和`offsetLeft`	獲取元素距離自己定位父級元素的左、上距離	獲取元素位置的時候使用，只讀屬性

仿京東固定導航欄案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>練習-仿京東固定導航欄案例</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 sk = document.querySelector('.sk')const header = document.querySelector('.header')//1.頁面滾動事件window.addEventListener('scroll', function () {//當頁面滾動到 秒殺模塊的時候，就改變頭部的top值//頁面被卷去的頭部 >= 秒殺模塊的位置  offsetTopconst n = document.documentElement.scrollTop// if (n >= sk.offsetTop) {//   header.style.top = 0// } else {//   header.style.top = '-80px'// }header.style.top = n >= sk.offsetTop ? 0 : '-80px'})</script></body></html>

實現bilibili點擊小滑塊移動效果：

<style>.line {transition: all .3s;}</style><script>//1.獲取父元素 添加事件委托const list = document.querySelector('.tabs-list')const line = document.querySelector('.line')//2.給a注冊事件list.addEventListener('click', function (e) {//判斷點擊的是aif (e.target.tagName === 'A') {// console.log(11)//得到當前鏈接的  offsetLeft// console.log(e.target.offsetLeft)//讓line 盒子來進行移動line.style.transform = `translateX(${e.target.offsetLeft}px)`}})</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/36214.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/36214.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/36214.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！