使用TS中元素使用offsetHeight，offsetTop，offsetLeft报错

最新推荐文章于 2024-10-30 22:09:17 发布

原创最新推荐文章于 2024-10-30 22:09:17 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

使用ts后，可以使用scroll家族和client家族，但使用offset家族会报错但也能运行

报错

类型“Element”上不存在属性“offsetHeight”

原因：ts中Element类型上没有定义offsetHeight，解决如下：通过as HTMLDivElement解决

(_content as HTMLDivElement).offsetHeight

要记得它只是只读的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

相见一月

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端技术搭建弹珠小游戏（内附源码）

官方推荐

05-08

7万+

上周我们实通过前端基础实现了小人逃脱，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个弹珠游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用，在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。

前端JS/TS面试题

Vevean2545116309的博客

03-12

7341

JS面试题总结一、pandas是什么？二、使用步骤1.引入库2.读入数据总结一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤 1.引入库代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('i

参与评论您还未登录，请先登录后发表或查看评论

html 滚动条 scrolltop scrollheight,HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理...

weixin_39602280的博客

06-27

2618

关于元素的一些属性在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些：尺寸相关：offsetHeight、clientHeight、scrollHeight；偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；获取相对视口位置：Element.g...

【无标题】

yerong4410的博客

04-21

222

/ 当前节点的所有属性的list。// System.out.println("属性名称："+name+"属性值："+value);// System.out.println("当前节点的内容："+text);// System.out.println("当前节点名称："+name);

类型 never 上不存在属性

Ranye的博客

06-01

1万+

初始化的时候没报错不一定没有问题！

类型“Element”上不存在属性“offsetTop”

浮游的博客

07-11

4566

记录一次类型错误的解决方案，ts报错类型“Element”上不存在属性“offsetTop”。因为ts默认用的是Element，需要声明为HTMLElement 或是下面这样当然如果你用的是angular的话，建议用 ElementRef

anguar6中无法在Element上找到属性 (eg 原DOM的offsetTop)

weixin_30329623的博客

09-13

311

let aa=this.elementRef.nativeElement.querySelector('.logBox') ; 转载于:https://www.cnblogs.com/fuzitu/p/9639730.html

小赛赛爱吃肉

01-09

1133

由于DOM元素位置和大小的属性这块和鼠标事件的知识点容易混淆，所以需要单独总结一下，又不想把截图存到本地，所以就有了这篇文章。如果有什么地方写的不对，还请私信或留言给我扶正! 谢谢。

在单vue3+ts页面里使用hammerjs实现对图片的放大缩小和移动,且移动不能超出屏幕范围

07-08

3. 在Vue模板中使用ref指令引用图片元素： ```html ``` 这样，你就可以在Vue 3 + TypeScript页面中使用Hammer.js来实现对图片的放大缩小和移动，并且确保移动不超出屏幕范围。记得将"path/to/image.jpg...

【React+Ts】窗口拖拽+放大缩小功能

weixin_66127892的博客

03-27

1029

tsx代码： import React, { Component, RefObject } from 'react' import './index.less' interface Iprop { } interface Istate { arr: arr[] } interface arr { id: symbol, txt: string } export default class index extends Component<Iprop, Istate>

display:none 引起的cannot read property 'offsetLeft' of undefined

huangjinlong1024的博客

11-15

2544

昨天在写一个html页面时，js里面用了offsetLeft方法，运行时在控制台提示cannot read property ‘offsetLeft’ of undefined。排查之后发现是项目里面引用的一个通用css里面对body进行了一个设置 body{ display:none } 百度了一下offsetLeft,发现offsetLeft需要在bod...

margin&offsetLeft&left易错点

qq_30258495的博客

08-21

226

margin&offsetLeft&left易错点

ts Property ‘offsetTop‘ does not exist on type ‘Element‘

qubes的专栏

04-24

949

Element 类型上没有 offsetTop, HTMLElement 类型上有 offsetTop。可以在类型上点进去看到。

在vue中，使用this.$refs.myDiv.offsetHeight获取组件高度，结果却报错，是因为...

Sherry Tian的博客

10-30

867

在vue中，使用this.$refs.myDiv.offsetHeight获取组件高度，结果却报错，是因为什么呢，一起来看看吧

Uncaught TypeError: Cannot read property 'offsetHeight' of null

热门推荐

hua_ban_yu的博客

09-21

2万+

在使用offsetHeight计算内容的高度时报Uncaught TypeError: Cannot read property 'offsetHeight' of null这个错误。错误原因：JS运行的时候页面还没有加载完成，js代码找不到页面元素，就会抛出这个问题解决方案：把自定义js放在<body/>结束标签前。 ...

JS兼容性问题---Element的offsetTop

baichong3681的博客

10-23

445

题目: 获取指定元素距离浏览器顶部的距离方案: var distanceTop = element.offsetTop; 不兼容浏览器: IE 7及以下原因: 未知, 貌似获得到的值是IE 8的offsetTop值解决方案: position: relative; 测试后结果: 完美解决...

获取元素属性（offsetHeight、clientHeight...）无效

月下lk山人的博客

06-03

3831

示例：在获取指定元素的高度时，始终打印为0 原因：可能是页面渲染过慢，造成offsetHeight（offsetWidth、clientHeight…）等属性渲染不及时解决方法有两种 1 使用useEffect监听offsetHeight属性的改变，然后赋值 2 使用计时器监听offsetHeight，有改变即重新赋值结论：推荐使用第二种计时器方法，因为使用useEffect对一个复杂对象监听时，效果可能不太理想......

offsetHeight说明

学习笔记

03-15

5261

offsetHeight说明:<br />本站解释:<br />offsetHeight与offsetWidth 作用相同，前者是获取元素的高度后者则是宽度．offsetHeight属性可以获取元素的可见高度值．包括边框和内部空白补丁．但超出元素的内容则不被计算．也就是说只返回元素的实际高度值．如果看得着边框．从上边框到下边框的距离则是offsetHeight返回的值．经过我测试无论在IE或FF均返回正常．值得一提的是我利用css 来控制元素的高度，在IE里会被撑大,FF里则不会．但返回的值是正确的！off

vue获取不到元素正确的offsetHeight

qq_43999459的博客

11-14

8666

vue页面渲染完成后根据获取到的数据来决定操作某个DOM元素想实现的效果：如果获取到的文本数据所占用的高度小于87px,则不显示展开这个按钮，反之则展示 html <div> <p id="idu">简介: <span type="text" v-html="introduce"></span> </p> <div> <a v-if="ishow">{{message}}</a&g

在网页开发中，使用element.offsetLeft

最新发布

12-13

在网页开发中，`element.offsetLeft` 是一个用于获取元素相对于其最近的已定位父元素的左偏移量的属性。这个属性在处理元素的布局和定位时非常有用。 ### 使用 `element.offsetLeft` `element.offsetLeft` 返回一个整数值，表示元素左边缘与其最近的已定位父元素（即 `position` 属性为 `relative`, `absolute`, `fixed` 或 `sticky` 的父元素）左边缘之间的像素距离。 #### 示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>offsetLeft Example</title> <style> .parent { position: relative; width: 300px; height: 200px; background-color: lightblue; margin-left: 50px; } .child { position: absolute; left: 20px; top: 30px; width: 100px; height: 50px; background-color: lightcoral; } </style> </head> <body> <div class="parent"> <div class="child" id="childElement"></div> </div> <script> const childElement = document.getElementById('childElement'); console.log('Offset Left:', childElement.offsetLeft); </script> </body> </html> ``` 在这个示例中，`.parent` 元素是一个相对定位的容器，`.child` 元素是一个绝对定位的子元素。`childElement.offsetLeft` 将返回 `.child` 元素相对于 `.parent` 元素的左偏移量，即 `20` 像素。 ### 注意事项 1. **已定位的父元素**：如果元素没有已定位的父元素，`offsetLeft` 将相对于文档的根元素（即 `<html>` 元素）进行计算。 2. **盒模型**：`offsetLeft` 包含元素的 `margin`, `border`, 和 `padding`，但不包括 `transform` 和 `position` 属性。 ### 相关属性 - `element.offsetTop`：返回元素相对于其最近的已定位父元素的上偏移量。 - `element.offsetWidth`：返回元素的布局宽度，包括 `padding`, `border`，但不包括 `margin`。 - `element.offsetHeight`：返回元素的布局高度，包括 `padding`, `border`，但不包括 `margin`。