Can't change CSS style in AngularJS

Question

For some reasons, I can\'t change the style of an element using the following :

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

I\'m su

Answer 1

If you are running Angular without jQuery, this works:

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

I have tested this in an ionic application.

Answer 2

Angular's element returns something that wraps a DOM element, not the DOM element itself. You can access the underlying element much like you would with a JQuery selector.

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

That of course assumes you've got one match, which you should when using an ID.

Answer 3

According to the docs:

Note: all element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

So the .style property is not available directly, since it is a property of the wrapped HTMLElement.

---

You can either use ivarni's approach to get hold of the HTMLElement (angular.element(...)[0].style...) or use jQuery's/jqLite's .css() method:

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