How to get the color of an element using angularjs

Question

I am being try to get the color of an element using angular js, but am unsuccessful. Here is what I am doing:

function colorApply() {
 var cardsList = document.getElementsByClassName("card-abbr");
 $timeout(function() {
  angular.forEach(cardsList, function(value) {
   var color = value.css('color');
   /*var color = value.style.color;*/
   console.log(color);
  });
 }, 1000);
}

My CSS:

.card-abbr:nth-child(1n) {
    color: #EF2525;
}
.card-abbr:nth-child(2n) {
    color: #88ba41;
}
.card-abbr:nth-child(3n) {
    color: #850057;
}
.card-abbr:nth-child(4n) {
    color: #003f60;
}
.card-abbr:nth-child(5n) {
    color: #588ba3;
}

This is returning nothing for me. Please help.

Have a look at developer.mozilla.org/en-US/docs/Web/API/Window/… — Mauricio Poppe
– Mauricio Poppe, Commented Mar 22, 2016 at 6:33

Mauricio Poppe · Accepted Answer · 2016-03-22 06:41:31Z

1

You can do it using window.getComputedStyle

function colorApply() {
  var cardsList = document.getElementsByClassName('card-abbr')
  angular.forEach(cardsList, function(el) {
    var style = window.getComputedStyle(el, null)
    var color = style.getPropertyValue('color')
  })
}

answered Mar 22, 2016 at 6:41

Mauricio Poppe

4,8861 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Archana Over a year ago

Awesome. Thank you :)

Collectives™ on Stack Overflow

How to get the color of an element using angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related