Angular -如何获取元素的宽度和高度
在Angular中，可以使用ViewChild装饰器和ElementRef来获取元素的宽度和高度。
首先，在组件的类中导入ViewChild和ElementRef：
import { Component, ViewChild, ElementRef } from '@angular/core';然后，在组件类中使用ViewChild装饰器来获取元素的引用：
@Component({
selector: 'app-example',
template: '<div #myElement>Example Element</div>'
})
export class ExampleComponent {
@ViewChild('myElement', {static: true}) myElement: ElementRef;
}在上面的代码中，我们使用了一个名为"myElement"的模板引用变量来标记要获取宽度和高度的元素。
接下来，可以在组件的生命周期钩子函数ngAfterViewInit中获取元素的宽度和高度：
ngAfterViewInit() {
const width = this.myElement.nativeElement.offsetWidth;
const height = this.myElement.nativeElement.offsetHeight;
console.log('Width:', width);
console.log('Height:', height);
}在上面的代码中，我们使用nativeElement属性来访问原生的DOM元素，并使用offsetWidth和offsetHeight属性来获取宽度和高度。
关于Angular中获取元素宽度和高度的更多信息，可以参考官方文档：https://angular.io/api/core/ElementRef
此外，腾讯云提供了一系列与前端开发相关的产品和服务，例如云服务器、云存储、云函数等，可以根据具体需求选择适合的产品。具体信息可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
Angular -如何获取元素的宽度和高度
angular
我怎样才能得到一个表格的td元素的宽度和高度？ <div class="page"> <tr> ...
浏览 217提问于2019-08-25得票数 0
回答已采纳
1回答
在angular8中，getBoundingClientRect()没有给出函数错误
javascript、angular、angular8
我在一个组件中有一个画布元素。我有一个单独的js文件，在这个文件中我使用angular.element( document.querySelector('#id') )获取元素。现在我想知道元素的高度和宽度。
浏览 26提问于2020-01-15得票数 0
1回答
如何动态设置组件主体的样式
css、angular、angular7
示例：https://stackblitz.com/edit/angular-mkcfsd 我有一个图标组件(app- icon )，它动态地获取路径并将该路径插入到svg viewbox中，我获得路径的高度和宽度，然后将svg设置为该高度和宽度。我的问题是app-icon的包装器给每个图标的高度/宽度增加了3-4
浏览 42提问于2019-04-23得票数 0
1回答
使用指令刷新窗口的元素高度和大小
angularjs
目前，以下指令获取页面加载时元素的宽度和高度。如何使其在调整窗口大小时刷新？angular.module('adsomaApp') return {
restrict
浏览 4提问于2018-01-12得票数 1
回答已采纳
1回答
从xml响应中获取svg元素
javascript、jquery、html、xml、svg
我想首先访问svg，然后获取svg viewbox的高度和宽度或其他方式。如何从响应xml访问svg以获得高度和宽度？我想使用javascript (可能是jquery)访问高度和宽度，如下所示：
this._imageW = jQuery(".SVGImage").width()；this.idk如何使用xml响应思想访问元素</em
浏览 3提问于2016-02-03得票数 0
2回答
在angularjs中将一个div的高度设置为另一个div
angularjs
我是新来的角度:-)我只是想设置尺寸的一个div到另一个，任何帮助感谢。{ 'height': imgHeight + 'px'; };
它返回宽度和高度
浏览 1提问于2015-02-09得票数 10
回答已采纳
1回答
如何在angular指令中找到新创建的元素的高度和宽度
angularjs、angularjs-directive
我正在尝试创建一个自定义的工具提示元素。我需要新创建的工具提示元素的高度和宽度。我总是把offsetHeight和offsetWidth设为0。var tooltip = angular.element('<div ng-style="tooltipStyle"><div class="ng-tooltip-arrow"></d
浏览 4提问于2016-07-26得票数 0
2回答
如何向高度大于宽度的元素的父级添加类
jquery、html、css、wordpress
图像的标题也需要包含在填充中，所以实际上我需要添加“<figure>”类的是tall父元素，而不是<img>标记。因此，我尝试向所有具有高度大于宽度的子<img>的<figure>元素添加一个类。我的问题是，虽然<img>指定了高度和宽度，但<figure>只指定了高度，所以下面的代码导致一个
浏览 25提问于2019-07-20得票数 0
回答已采纳
1回答
Element.prop('scrollHeight')为Angular.js中的不同列表项返回相同的值
javascript、jquery、html、css、angularjs
我正在尝试获取列表项的高度和宽度。我检查了获取项目高度和宽度的各种方法，但没有一种方法返回元素提供的实际scrollHeight。所以我用下面的代码把它们打印出来： return {
restr
浏览 1提问于2014-12-01得票数 2
2回答
AngularJs element.height()不是一个函数
angularjs
我正在尝试创建一个会影响元素宽度/高度的指令。通过查看示例，我看到您可以通过引用适当的函数来获取/设置宽度/高度。例如，在指令的link函数中，我尝试这样做： var height = element.height();然而，在我的代码中我是不是错过了对某些angular.js模块&
浏览 2提问于2014-03-01得票数 11
回答已采纳
1回答
使用Selenium WebDriver设置滑块的值
angularjs、selenium、selenium-webdriver、slider、automated-tests
我有一个这样的滑块：
由angular-js编写，代码如下： // a lot of spans here </div>我想单击以将滑块指向
浏览 0提问于2016-11-11得票数 0
1回答
无法像这里的其他答案那样通过ViewChild检索元素的宽度和高度？
angular、typescript、viewchild
因此，我得到了一个角组件，在输入文本之前的HTML简单地是：<svg #linechart id="chartSpace"></svg>
为了制作一个响应性好的网页，我决定设置视图的高度和宽度：#chartSpace然后，为了获得缩放图表轴线的高度/宽度，我在Stack溢出上遵循了几个示例，并尝试使用ViewChild获取元素，如下所示
浏览 1提问于2018-12-09得票数 0
回答已采纳
1回答
用d3扣除文本元素的高度
d3.js
由于不能用另一个图形元素包装<text>元素，所以我只需在类似的坐标上添加一个rect元素就可以将文本包装成矩形边框。但是，我想根据文本的宽度和高度(变化)来计算这个矩形的宽度和高度。如何获取文本元素的高度和宽度(如果有的话)？我在谷歌搜索了一下，但没有发现任何类
浏览 1提问于2014-02-23得票数 2
回答已采纳
2回答
在边缘中获取带槽的lit元素的宽度/高度
css、shadow-dom、custom-element、lit-element
我将一个lit元素inner-element插入到另一个lit元素outer-element中。为了灵活起见，outer-element使用CSS设置inner-element的宽度和高度。inner-element需要知道它的宽度和高度来决定如何绘制它的内容。
inner-element如何在不同浏览器之间可靠地学习自己的宽度
浏览 0提问于2019-02-04得票数 1
2回答
有角方向的页面加载重标度和裁剪图像
javascript、jquery、html、css、angularjs
我有一个指令，根据图像的高度和宽度，对图像进行渐变和裁剪。angular.module('starter.directives', ['starter.controllers']).directive('styleImage', function () { styleImage(elem[0])
}
浏览 2提问于2016-06-08得票数 0
回答已采纳
1回答
如何从GstCaps获取视频/x数据
gstreamer
我试图支持所有的相机驱动程序，但我需要区分音频和视频驱动程序。因此，我需要从GstCaps元素获取视频/x-raw，图像/jpeg，但是我在互联网上找不到任何东西--如何只从GstCaps获取视频/x-raw。我知道如何从GstCaps中获取高度和宽度gst_st
浏览 0提问于2019-02-11得票数 0
回答已采纳
1回答
如何在webview中获得缩放视图的宽度和高度？
android、jquery、css、webview
我使用$(window).width() and $(window).height()获取get视图的宽度和高度，但是这些值总是返回相同的值，以及整个get视图的实际宽度和高度。我需要的是获取视图端口的宽度和高度，用户目前只看到它，所以当缩放视图端口的宽度和
浏览 2提问于2016-04-18得票数 3
回答已采纳
2回答
如何在flutter中以编程方式获取Android导航栏的高度和宽度？
flutter、flutter-layout
如何以像素为单位获取此UI元素的高度和宽度？
浏览 32提问于2020-02-11得票数 2
回答已采纳
1回答
动态JS -如何获得元素的缩放高度？
javascript、jquery、kineticjs
我试图在KinecticJS中获取元素的缩放高度/宽度，但getHeight()/getWidth()只返回原始高度和宽度，而不返回缩放后的高度和宽度。有没有我遗漏的函数？
提前谢谢你，马特
浏览 2提问于2012-12-07得票数 0
1回答
javascript Raphael路径宽度
javascript、svg、raphael、scaling
缩放本身工作得很好，但它在中心进行缩放，我希望它在不同的点进行缩放(路径的图形是一个圆圈扇区，我希望它在“圆圈”的中心进行缩放)。
有没有一种方法可以得到路径的高度和宽度？
浏览 3提问于2012-07-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
