无法更改 AngularJS 中的 CSS 样式

Posted 2023-02-19

【中文标题】无法更改 AngularJS 中的 CSS 样式

【英文标题】：Can't change CSS style in AngularJS

【发布时间】：2014-08-13 11:08:11

【问题描述】：

由于某些原因，我无法使用以下方法更改元素的样式：

angular.element("#element").style.height = 100px;

我确信angular.element("#element") 有效，因为它返回一个DOM 元素。另外，这很有效：

angular.element("#element").addClass('something');

（我发现的所有内容都与 ngStyle 有关，但我认为这不是我想要的？）

我应该使用其他东西吗？

如果是这样： 什么 ？ 为什么.style.something 不起作用？

【问题讨论】：

您确定它按您描述的那样工作。你必须加载 jQuery 是吗？

【参考方案1】：

Angular 的element 返回包装了 DOM 元素的东西，而不是 DOM 元素本身。 您可以像使用 JQuery 选择器一样访问底层元素。

angular.element("#element")[0].style.height = 100px;

这当然假设您有一个匹配项，在使用 ID 时应该这样做。

【讨论】：

什么？你不会得到“jqLit​​e 不支持通过选择器查找元素！...”

如果您在 Angular 之前加载 JQuery 则不会，他显然这样做了，否则他会问一个不同的问题。

参见docs.angularjs.org/api/ng/function/angular.element，“要使用 jQuery，只需在 DOMContentLoaded 事件触发之前加载它”。

无需傲慢@ivarni。如果 OP 故意加载 jQuery，他的问题会是关于 jQuery，而不是 Angular。甚至您似乎也没有意识到返回对象与 jQuery 不太“相似”。它是 jQuery。

我并不是要“傲慢”，我只是说如果他没有加载 JQuery，那么他可能会问为什么选择器不起作用。由于他明确表示选择器有效，这意味着他确实加载了它。

【参考方案2】：

根据the docs：

注意：Angular 中的所有元素引用总是用 jQuery 或 jqLit​​e 包裹；它们绝不是原始的 DOM 引用。

所以.style 属性不能直接使用，因为它是被包装的htmlElement 的属性。

---

您可以使用 ivarni 的方法来获取 HTMLElement (angular.element(...)[0].style...) 或使用 jQuery 的/jqLit​​e 的 .css() 方法：

angular.element('#element').css('height', '100px');

【讨论】：

好吧，我正在尝试使用 angular.element(el).css("-webkit-transform","translate3d(200px,0,0)") 并且它根本不起作用..似乎jqlite 不解析“-”。

我刚刚发现 !important 是问题所在。不知道为什么

对我不起作用。这有效：angular.element(document.querySelector("#element")).css("height", "100px").

@stéphane-laurent：您可能没有使用 jQuery。使用 jqLit​​e，您只能按标签名称查找元素（如答案中链接到的文档中所述）

这适用于更改高度或宽度，但不适用于更改具有给定 id(#) 的 div 的背景颜色。请建议

【参考方案3】：

如果你在没有 jQuery 的情况下运行 Angular，这可行：

angular.element(document.querySelector("#element"))[0].style.height = "100px";

我已经在离子应用程序中对此进行了测试。

【讨论】：

这行得通，但是你得到了两次元素，一次是.element，一次是.querySelector