I am trying to use AngularJS to grab the element by tag name.
For example,
angular.element(document.querySelector('h1')).css('color', 'green');
element in HTML:
<div>
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
It works only for the first element but not the second one. I am not sure the reason for it. Can anyone help me about it? Thanks a lot!
As @Tushar mentioned, the best way to handle this is with ng-class. Let Angular do the DOM manipulation for you
Your CSS
.someclass{
color: green
}
Your HTML
<div ng-class="{'someclass': obj.value == 'somevalue'}">
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
After 'someclass', in your controller, you can insert whatever expression makes the most sense. When your expression evaluates to true, the 'someclass' will be applied to your Div.
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
querySelector()selects first matching element. You can usequerySelectorAllto select all matched elements, loop over them and apply styles. However, I'd suggest to useng-classwith a flag on those elements.ng-repeatas in<div ng-repeat="title in titles"><h1 ng-class="{'color': title.color}">{{title.text}}</h1></div>. It depends on what you're trying to accomplish, but make sure you're trying to do things the "Angular" way. See this for more info: stackoverflow.com/questions/14994391/…