Discovering the element's color with angularJS

I've been trying to fetch the color of an element using AngularJS, but I'm not having any luck. Here is my code:

function getColor() {
 var elements = document.getElementsByClassName("card-abbr");
 $timeout(function() {
  angular.forEach(elements, 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;
}

But unfortunately, this code isn't returning anything for me. Can someone please assist?

Answer №1

One way to achieve this is by utilizing the window.getComputedStyle method.

function applyColor() {
  var elementsList = document.getElementsByClassName('element-class')
  angular.forEach(elementsList, function(item) {
    var styling = window.getComputedStyle(item, null)
    var colorScheme = styling.getPropertyValue('color')
  })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Token used to secure library file access in the index.html page

Currently, I am facing an issue with my index.html files. One is dedicated for the login page, and once a user successfully logs in, the entire index.html file gets loaded. This main index.html file contains various library files such as AngularJS and othe ...

Setting the width to 100% in the CSS file is not functioning properly in Chrome browser

Below is the CSS code I am using: td.tdhover input:hover,td.tdhover select:hover,td.tdhover textarea:hover{ background: #f2f5a9; color:#ff0000; } td.tdhover select, td.tdhover input, td.tdhover textarea{ position:relative; width:100%; } td.tdhover inp ...

Expanding dropdown options based on content in AngularJS

Is it possible to auto-adjust only the size of the dropdown list within an AngularJS listbox? I am looking to resize just the dropdown portion, not the top part. Here is an example image: enter image description here ...

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

ng-show and ng-hide toggling for the active row

I have a single table where I am implementing row hide and show functionality using Angular for editing and saving purposes. So far, everything works as expected. $scope.init=function(){ $scope.editable=true; } Now, when I click on the edit button ...

"Manipulating time formatting within an array with the help of moment.js, AngularJS, and lodash

I am working with JSON data that includes timings based on dates. obj = { "2017-12-08": [ "2017-12-08T13:00:00+0530", "2017-12-08T15:00:00+0530", "2017-12-08T15:30:00+0530", "2017-12-08T16:00:00+0530" ], "2017-12-09": [ "2017-12-09T09: ...

What is the appropriate Typescript return type to use for a $http request that only returns a successful response with no content?

I recently developed a Typescript service: class SettingsService implements ISettingsService { public info = {}; public backupInfo = {}; public userConfig = {}; public isLoaded = false; constructor( private $http: ng.IHttpSer ...

What is the best way to clear the cache in AngularJS?

It is crucial for the cache to be cleared consistently. However, no matter if a client is created, updated, or deleted, the same result always occurs. Only when I manually delete the cache (Ctrl+Shift+Supr), am I able to view the new data. .factory(' ...

Use AngularJS to bind the plain text content of an HTML page to a textarea field

After using http.get() to retrieve an HTML page and storing it in a scope variable, I am looking to eliminate all HTML tags from the content portion. In essence, I only want to display the page's content within a textarea. Thank you for your assistan ...

Introduction to AngularJS search filtering

My webpage is currently very simple: <h4>{{event.name}}</h4> <p>{{event.desc}}</p> <p>At: {{event.venue.name}}</p> I am looking to enhance it by adding a search feature that can search through the name, description, ve ...

Tips for removing the pound sign from a URL using AngularJS

Currently, I am utilizing AngularJS 1.3 for my project. The URL for my project can be accessed at http://localhost/MyProject/app/#/index.html. However, I aim to open the index.html file specifically at the URL http://localhost/MyProject/index.html. Could s ...

Determine the dimensions of a div element with overflow property and utilize the information to establish a boundary for the scrollbar

While this may seem like a straightforward question, I'm struggling to find a solution. Consider a div with an overflow property set, causing a scroll bar to appear when the text added is larger than its dimensions. You can see an example of this her ...

How can I center <text> within a button using Vue Native?

Is there a way to position the "login" text in the center of the button? I've attempted using align-items: center; and justify-content: center;, but it doesn't seem to be working https://i.sstatic.net/XVHWA.png <template> <view cla ...

What is the best way to align a card-body to the right for screen sizes larger than 1280 using Bootstrap

I'm having trouble getting the float classes to work on my Bootstrap cards. Specifically, I want to float a card-img left and the card-body right using Bootstrap cards, but it's not behaving as expected. Can someone provide some insight into what ...

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

Utilizing AngularJS to render nested array objects within HTML attributes

I have some data that looks like this: Continent":"Africa", "Countries":{ "Nigeria":[ { "Id":"2", "ColumnName":"Lagos", "Type":"Textbox", } ] } I am wondering if it i ...

How to keep Drop-Shadow visible on Blogger Emporio theme homepage snippets

My website, , is built on the Blogger Emporio theme with a custom domain. Currently, on the desktop or laptop view of the homepage, snippets highlight with a drop-shadow when the cursor is hovered over them. I am looking for a way to make this drop-shado ...

Can a circular image be created with text positioned to its right?

Hey there, hope everyone is well. I'm attempting to achieve a layout similar to the one in this image: https://i.sstatic.net/Y6wa4.png The text should be positioned on the right side of the image, without a large white space separating them. ...

Develop a design utilizing a foundational database entity

I'm new to AngularJS and I am seeking guidance on how to properly separate the model from the controller. In my previous experience, I have always integrated models within the controllers. For example: angular.module("app").controller("customerContr ...