Javascript 在Angular 2中直接更改CSS属性+

在jQuery中，我们可以

JQuery('.someStyle')
  .css({"background", "red"})

直接更改样式中的CSS属性

---

在Angular 2+中，我们可以使用[style.]来操作，是否有直接操作样式表的选项？

Angular offer模板引用变量如下。这里textCont是一个模板变量，它可以传递给组件，并可用于添加样式

    <div #textCont> I wil change color on click<div>
<button type="button" (click)="changeColor(textCont)">Click</button>

---

即使使用您发布的jQuery代码片段，您也不会操作样式表，只有表示DOM元素的对象的CSS属性

为什么要直接操作样式表？您必须在浏览器解析它之前对其进行修改—在它从服务器发送到客户端之前。这是不可取的

您可能正在寻找的只是一种动态更改DOM元素样式的方法

---

使用Angular有很多方法可以实现这一点，从注入ElementRef对象（提供对组件的宿主元素的访问）到组件的构造函数，或者使用来直接在DOM元素上更改样式，再到像您提到的[style.]甚至是[style.]那样的模板化。

在我之后重复：Angular不是jQuery。Angular不是jQuery。Angular不是jQuery。有几十个理由不这样做。最终，样式将与系统状态不同步；除其他问题外，服务器端渲染将无法工作。如果您想这样做，这表明您还没有从jQuery的命令式风格转变为Angular的声明式风格。

changeColor (elem){
    elem.style.color="red"
  }