angualr如何获取div标签的宽、高

 时间:2026-04-21 18:49:40

1、创建angualr项目,使用 ng new createCib创建一个angular项目

angualr如何获取div标签的宽、高

2、打开项目,使用前端开发工具打开新建的createCib项目

angualr如何获取div标签的宽、高

3、 找到项目下的app.component.ts文件,使用import引入 ViewChild, ElementRef 

angualr如何获取div标签的宽、高

4、使用ViewChild和ElementRef 定义要操作的dom标签

代码:

 @ViewChild("divWidth")

  divWidth: ElementRef

angualr如何获取div标签的宽、高

5、在angualr初始化方法中调用定义好的dom对象,从而获取标签的宽

获取宽的代码: 

this.divWidth.nativeElement.clientWidth

angualr如何获取div标签的宽、高

6、打开app.component.html文件找到div标签,然后在div标签上添加 #divWidth

angualr如何获取div标签的宽、高

7、保存代码后启动项目,按F12后即可看到控制台上已成功打印出浏览器的宽。(如果要获取浏览器的高度,只要clientWidth修改为clientHeight即可)

angualr如何获取div标签的宽、高

  • 常用Git命令文件如何提交到本地库
  • MiniUi如何实现新增?
  • MFC应用实例:[56]自定义窗口设置字体颜色
  • Redis用什么命令解决同时拿出多条数据
  • eclipse properties中文编码错误 \u548C
  • 热门搜索
    超速10%不到20%怎么处罚 怎么减肥肚子 美孚机油怎么样 怎么做双皮奶 速冻水饺怎么煮 卵泡发育不好怎么办 前戏应该怎么做 腾达路由器怎么样 女生长胡子怎么办 怎么买马