单击时更改块样式

Question

我使用Angular CLI，有一个菜单列表。我想点击

后更改li的背景颜色

<ul>
   <li class="menu_btn">1</li>
   <li class="menu_btn">2</li>
   <li class="menu_btn">3</li>
   <li class="menu_btn">4</li>
</ul>

TS：

export class ProfileComponent implements OnInit {


  constructor() { }

  changeColor() {
    let menuButton = document.getElementById("menu_btn");   
  }

我如何改变ts的风格？或者任何方式

Answer 1

 export class ProfileComponent implements OnInit {


   constructor() { }

   changeColor() {
      let menuButton = document.getElementsByClassName("menu_btn") as HTMLCollectionOf<HTMLElement>;
      menuButton.style.backgroundColor = 'yourColor'; 
  }

这将在您点击

后更改所有menu_btn类

Answer 2

在您的HTML中没有ID

改为使用班级名称

getElementsByClassName("menu_btn")

您可以像这样使用来改变风格

menuButton.style.backgroundColor = 'red';