单击时更改块样式

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';