首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular8中,getBoundingClientRect()没有给出函数错误

在Angular 8中,getBoundingClientRect()是一个用于获取元素的位置和尺寸信息的方法,它返回一个DOMRect对象。如果在使用getBoundingClientRect()时没有给出函数错误,可能是由于以下几个原因:

  1. 元素不存在:如果你尝试在一个不存在的元素上调用getBoundingClientRect()方法,会导致函数错误。请确保你正在调用该方法的元素存在于DOM中。
  2. 方法调用位置错误:getBoundingClientRect()方法只能在浏览器环境中使用,而不能在Angular组件的构造函数或ngOnInit()生命周期钩子中调用。这是因为在这些钩子中,组件的模板还没有被渲染到DOM中,因此无法获取元素的位置和尺寸信息。你应该在ngAfterViewInit()生命周期钩子中调用getBoundingClientRect()方法,以确保元素已经被渲染到DOM中。
  3. 引用错误:如果你在调用getBoundingClientRect()方法时使用了错误的元素引用,也会导致函数错误。请确保你传递给getBoundingClientRect()方法的是正确的元素引用。

总结起来,要解决getBoundingClientRect()没有给出函数错误,你需要确保元素存在于DOM中,并在适当的时机调用该方法。如果问题仍然存在,可能是由于其他代码逻辑或环境配置问题导致的,你可以进一步检查代码和调试来解决该问题。

关于Angular 8的更多信息和相关内容,你可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

偏移量、客户区大小、视口大小、滚动大小、确定元素大小

其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性。...scrollHeight:没有滚动条的情况下(平铺开),内容的总高度。 scrollWidth:没有滚动条的情况下(平铺开),内容的总宽度。...(上面两者既可以确定元素当前滚动的状态,也可以设置元素的滚动位置) 5、确定元素的大小 getBoundingClientRect( )方法,这个方法会返回一个矩形对象,包含4个属性left、top、...right和bottom,给出了元素页面相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2),而其他浏览器包括ie9则将(0,0)作为起点坐标,所以用函数使用它自身的属性来确定是否要对坐标进行调整...所以跨浏览器的函数可以写成: function getBoundingClientRect(element){ var scrollTop=document.documentElement.scrollTop

1.4K20

头条秋招面试题以及答案

var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; //再加上滚动距离,就可以得到绝对位置...var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect...1、从原型入手,Array.prototype.isPrototypeOf(obj); 利用isPrototypeOf()方法,判定Array是不是obj的原型链,如果是,则返回true,否则false...去重 ---- 2.已知如下对象,请基于es6的proxy方法设计一个属性拦截读取操作的例子,要求实现去访问目标对象example不存在的属性时,抛出错误:Property "$(property)"...proxy.location) Proxy 实例的方法的其他方法参考这个链接,很详细 https://blog.csdn.net/qq_30100043/article/details/53443017 ---- 3.给出如下虚拟

68130

详细设计一个文章页目录插件

,当高亮位置移动到目录滚动区域的上半部分之前,这段不进行目录滚动,如上面的图 ② 到 图 ③ 的变化过程; 当第一个子目录贴着滚动区域的顶部,且高亮位置位往下继续滚动的时候,需要进行目录滚动,滚动的距离是当前高亮目录所在位置距离滚动区域中间位置的高度差...并没有,由于浏览器可视区域是不固定的,所以我们需要计算出目录所在滚动区域的高度。...滚动高度 = n个目录子项 * 子项的实际高度 先说子项的实际高度,对于目录子项的样式上,我这里没有用内间距和外边距,而是通过 line-height 来控制他们之间的间隙,那么: 子项的实际高度 =...除此之外,requestAnimationFrame 的回调函数执行次数通常是每秒60次,即大概每 16.6 毫秒执行一次回调函数,但在大多数遵循 W3C 建议的浏览器,回调函数执行次数通常与浏览器屏幕刷新次数相匹配...); 使用插件 然后实际页面里使用的时候,只需要引入 articleCatalog.js,然后直接用调用函数即可: articleCatalog() 当然调用的时候也支持传入一些参数,参数说明如下

2.4K20

【前端词典】4 (+1)种滚动吸顶实现方式的比较

或许写这个代码的人没有注意到“定位父级”这个这个附属条件。 后来项目中总会遇到滚动吸顶的效果需要实现,现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...scrolloTop() 有兼容性问题,微信浏览器、IE、某些 firefox 版本 $('html').scrollTop() 的值会为 0,于是乎也就有了第三种方案的兼容性写法。...四、使用 obj.getBoundingClientRect().top 实现 定义: 这个 API 可以告诉你页面某个元素相对浏览器视窗上下左右的距离。...some code } } } offsetTop 和 getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面某个元素的左...这样可以控制一定时间内只读取 这里节流函数就直接是用 lodash.js 封装好的 throttle 方法。

2.1K30

Canvas网页涂鸦板再次增强版

第一版Canvas涂鸦板 实现功能:涂鸦板上鼠标按下去拖动的涂鸦效果 实现思路:监听鼠标按下、移动、松开事件,将鼠标按下的值赋值给moveTo的x和y值,作为起始位置。...移动事件,将鼠标距离可视区x和y值赋给lineTo,再进行描边。 实现代码 <!...context.stroke();//绘制描边 }; //当鼠标按键被松开时,onmousemovet函数返回...实现功能: 实现涂鸦时上一步和下一步的功能(撤回) 实现选择画布颜色的功能 实现对涂鸦的涂鸦板生成图片 实现思路: 后退和前进(撤回)功能,我的想法是每画一次就将整个画布的数据push到一个数组,...按前进和后退时再将对应的数据取出来,这个可以通过getImageData和putImageData方法实现,这两个方法的使用可以到http://www.w3school.com.cn/tags/html_ref_canvas.asp查看

1.2K30

面试官问:如何判断一个元素是否可视区域?

面试官问:如何判断一个元素是否可视区域? 最近在参加面试找工作,陆陆续续的面了两三家。其中一个面试官问到了一个问题:如何判断一个元素是否可视区域?...由于平时处理的不多,所以一时没有回答出来,后来研究了下,所以有了这篇文章。 1....一旦 Intersection Observer 被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以同一个观察者对象配置监听多个目标元素。...var io = new IntersectionObserver( entries => { console.log(entries); } ); 上面代码,回调函数采用的是箭头函数的写法...() 方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回 null boundingClientRect:目标元素的矩形区域的信息 intersectionRect:目标元素与视口(或根元素)

2.8K21

追求完美代码之——实现元素拖拽修改宽高和位移插件

代码复用:多处涉及到拖拽,拖拽需要抽取出来做公共方法 实现一个拖拽 ❌ 错误示范 给元素加上mousedown(按下的时候)事件,此时开始绑定mousemove;当鼠标弹起,移除mousemove...如何设计最简单呢,当然是万能的return一个新函数大法: // 挂载元素后,return一个清除事件的方法 eles.forEach(e => { ele.appendChild...所以,我们最开始的ele.getBoundingClientRect那一步开始,要加上margin const { x, y, width, height } = ele.getBoundingClientRect..., cb, ...rest); document.removeEventListener(MOBILE_MAP[key], cb, ...rest); }; 复制代码 替换名字后,代码...最后 扩展:最开始的时候,传入一个config对象,每一个函数都会透传这个对象,这个对象贯穿整个过程,控制每一个流程可以个性化配置 代码比较多,具体代码见codesandbox,还有旋转功能没有实现,其实就是扩展一下控件即可

2.2K41

懒加载 React 长页面 - 动态渲染组件

判断组件是否视图内有两种方式,一种是调用调用Element.getBoundingClientRect\(\)[1]方法以获取 loading 元素的边界信息,进行判断,另一种是调用Intersection...监听滚动优化 滚动时会频繁触发 scrollRenderHandler 函数,导致页面性能低下。...没有引入 React.memo 之前,使用 PureComponent 可以达到对 props 浅比较的效果,另外,我们也可以采用 shouldComponentUpdate 来进行具体的比较,从而减少组件的渲染次数...具体如:shouldComponentUpdate(nextProps, nextState)而在函数组件,我们可以使用 React.memo ,它的使用方法非常简单,如下所示。...写一个普通的长页面的过程,如果只追求完成,那么将会非常简单,但如果想要进一步优化,那可做的事情就有很多了。

3.4K20

前端-原生JS实现最简单的图片懒加载

什么时候用懒加载 当页面需要一次性载入很多图片的时候,往往都是需要用懒加载的。 懒加载原理 我们都知道HTML的 标签是代表文档的一个图像。。说了个废话。。...如果没有 src属性,就不会发送请求。 嗯?貌似这点可以利用一下? 我先不设置 src,需要的时候再设置? nice,就是这样。...我们先不给 设置 src,把图片真正的URL放在另一个属性 data-src需要的时候也就是图片进入可视区域的之前,将URL取出放到 src。.../img/img5.png">   仔细观察一下, 标签此时是没有 src属性的,只有 alt和 data-src属性。...函数节流 类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。 所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。

5.1K30

原生 JS 实现最简单的图片懒加载

什么时候用懒加载 当页面需要一次性载入很多图片的时候,往往都是需要用懒加载的。 懒加载原理 我们都知道HTML的 标签是代表文档的一个图像。。说了个废话。。...如果没有 src属性,就不会发送请求。 嗯?貌似这点可以利用一下? 我先不设置 src,需要的时候再设置? nice,就是这样。...我们先不给 设置 src,把图片真正的URL放在另一个属性 data-src需要的时候也就是图片进入可视区域的之前,将URL取出放到 src。.../img/img5.png"> 仔细观察一下, 标签此时是没有 src属性的,只有 alt和 data-src属性。...函数节流 类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。 所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。

2.9K20

这是一篇很好的互动式文章,Framer Motion 布局动画

First First ,在任何布局变化发生之前,测量我们要做动画的元素的位置: 获取元素位置的一种方法是使用HTML元素的.getBoundingClientRect()方法: const Motion...(); }, []); return ; }; Last Last 这一步,我们测量布局变化后元素的位置: 为了代码实现这一点...如果我们 play 步骤之前暂停动画,我们可以看到 inverse 转步骤中出了问题--正方形没有完全与它的原始位置对齐: 修复转换的起点 我们试着搞清楚这个问题。...换句话说,这个错误的发生是因为测量的距离和变换原点之间的差异:getBoundingClientRect()返回元素的左上角,而变换原点默认是元素的中心。...但是,运行起来效果却是错误的: 整个动画过程,文字明显地改变。 正确的缩放时间 这里的问题就在于这个假设: 只要比例校正的时间与父动画相同,这种方法应该是有效的。

2.6K20

【前端词典】4 种滚动吸顶实现方式的比较

或许写这个代码的人没有注意到“定位父级”这个这个附属条件。 后来项目中总会遇到滚动吸顶的效果需要实现,现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...scrolloTop() 有兼容性问题,微信浏览器、IE、某些 firefox 版本 $('html').scrollTop() 的值会为 0,于是乎也就有了第三种方案的兼容性写法。...四、使用 obj.getBoundingClientRect().top 实现 定义: 这个 API 可以告诉你页面某个元素相对浏览器视窗上下左右的距离。...some code } } } offsetTop 和 getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面某个元素的左...该函数返回一个 object 对象,有6个属性: top,right,buttom,left,width,height。

2.5K60

页面中元素的吸顶

粘性定位元素相当于position:relative和position:sticky的结合体,受限于父级元素,不同的条件下呈现出不同的页面效果 [2. 如何使用sticky?]...sticky元素效果完全受限于父级元素,使用条件: sticky元素的父元素的overflow只能设置为visible,否则会导致没有粘滞效果 sticky元素的父元素不能设置固定的高度,否则会导致没有粘滞效果...sticky满足条件变成fixed定位时,与标准fixed元素不一样,不会脱离文档流 sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果 同一个父级元素的sticky元素,如果定位值相等...因此我们需要注意的是,监听页面滚动的过程,需要将定位父级元素的偏移量也计算在内,可以如下写法: //获取当前元素的offsetTop getOffsetTop(obj) {...的mounted生命周期函数添加监听事件滚动的事件: mounted() { /**通过给变成固定定位的元素添加一个同等高度的父元素,防止该元素变成固定定位时,脱离文档流导致的页面抖动 */

1.2K30

GNE 版本升级,基于可视化信号自动化识别并提取新闻正文

因为正文的位置和评论的位置肯定不一样,版权信息一般最下面……这些可视化信号,是通过 CSS 来确定的,单纯从 HTML 是看不到的。...既然如此,使用模拟浏览器的时候,为什么不直接把每个节点的坐标信息都记录下来呢?...使用模拟浏览器的时候,只需要执行一段 JavaScript 代码,就可以把每个节点是否可见,每个可见节点的长宽高、左上角、右下角的坐标记录下来。...我们用一篇新闻来作为例子:广西省发生了一起事件,位置来宾市,画面曝光。...如果你想要使用 Puppeteer 或者 Selenium 来实现同样爬虫,想批量自动化执行 JavaScript,我给出一个 Demo,大家可以参考:GitHub - GeneralNewsExtractor

1.3K31

逐步拆解React组件—Lazyload懒加载

充满各种轮子的世界,即使我们没有必要自己造轮子,但是也要懂得轮子的原理,才能把别人的变成自己的。...为什么要用懒加载 平时开发的时候我们总会遇到长列表,因为本身web长列表的性能并不是特别好;加之web本身受到网络波动影响特别大,首屏同时加载过多的内容会导致卡顿不流畅响应速度慢等问题。...什么是懒加载 懒加载也叫延迟加载,指的是长网页延迟加载dom(jquery时期常用于延迟加载图片,现在也会用于延迟加载复杂组件),是优化网页性能的方式之一。...这里提到了防抖和节流,长列表中用户快速滑动时,视图直接划过用户并没有查看,使用防抖和节流可以有效的改善性能,这里简单解释一下防抖和节流的区别 防抖:规定时间内多次触发时只执行最后一次 节流:规定时间内多次触发时只执行某几次...防抖和节流都是为了限制函数的执行频率,以优化函数触发频率过高导致的响应速度跟不上,延迟假死或卡顿的现象 防抖函数:原理是维护一个计时器,规定时间后执行回调.若在此期间再次触发,则重新开始计时 function

1.6K10
领券