Foreground and background color pairs extraction tool for parsers

When analyzing a static webpage where the only source of colors is in either the CSS files or HTML file itself, how can we extract foreground-background color pairs from the page? For instance, on the Google home page, some potential color pairs could be (assuming GOOGLE is displayed as text):

(Foreground, Background) : (blue, white), (Red, white), (Yellow, white), (Green, white), (blue, white), (Green, white).

One approach to consider is examining the DOM tree structure of a webpage, starting from the root node HTML. The (Foreground, Background) assigned to a parent tag in HTML or in CSS would serve as the default color for all its children. However, if a child belongs to a specific class in the CSS, then the color property defined in that class would override the parent's colors. Any suggestions or alternative methods/tools for obtaining these results are welcome.

javascripthtmlcsscolors

Answer №1

This is a function I wrote to iterate through children elements.

function iterateChildren(elem){
      var child = elem.children();
    $.each(child,function(i,v){
        iterateChildren($(this));
          var pair = {fgHex:rgb2hex($(this).css('color')),bgHex:rgb2hex($(this).css('background-color'))};
      colorPair.push(pair);
      var tmp = {nodeName:$(this).get(0).nodeName,id:$(this).attr('id'),cssClass:$(this).attr('class'),colrhex:rgb2hex($(this).css('color')),colr:$(this).css('color'),bg:$(this).css('background-color'),bgHex:rgb2hex($(this).css('background-color'))};
          result.push(tmp);
    });    
}

To use the function, you can call it as shown below:

var elems = $('body');
iterateChildren(elems);

I have provided a fiddle here for reference.

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

Trouble displaying content with JQuery AJAX

I'm fairly new to working with JQuery/Ajax; this is only my second project and my first time posting here. I've been searching for a solution, but I haven't found one yet. The syntax structure below is similar to what I successfully used wit ...

javascriptjqueryhtmlajax

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

javascriptcssreactjsreact-bootstrap

Load the content of the dialog and transfer variables

After struggling for days, I am still unable to find a solution to my current dilemma. In my database, there are approximately 1300 items each with its own unique "id", a corresponding "name", and a property called "enabled". My goal is to display links t ...

javascriptphpjquery

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

Troubleshooting Vue and Laravel API CRUD: Issue with updating data

I am currently working on building a simple CRUD application using Laravel 9 and Vue js 3. However, I have encountered an issue where the method does not seem to be functioning correctly. The update method from the Laravel API works perfectly fine (I test ...

javascriptphplaravelvue.js

The text field is unable to receive input by clicking a button, only registering values when physically typed into the field

I have three text fields with buttons to increment or decrement the value, and a final text field that displays the calculation of the values in each field. Everything is functioning correctly, however, the issue arises when I try to add values using the ...

javascriptphpjquerybootstrap-4codeigniter-3

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a responsive table using Bootstrap is easy and efficient

Looking for assistance in making a responsive table. Everything looks fine at full size: https://i.sstatic.net/xKSLi.png but when the screen size is reduced I end up with something like this: https://i.sstatic.net/x0kwc.png The table is displayed on col- ...

cssbootstrap-4responsivecss-tables

What is the best way to compress @font-face using gzip?

Could you demonstrate how to gzip a webfont kit? The code provided by the generator is as follows...what modifications are necessary? @font-face { font-family: 'DesigersBold'; src: url('desib__-webfont.eot'); src: url(&apos ...

cssgzipfont-face

Error: Unable to iterate over data.data due to its type

I am attempting to fetch images from the woocommerce API and here is the code I am using: this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool') .then((data: any) => { this.banners = data.data; consol ...

javascriptangulartypescriptionic-framework

Sign in and view SESSION data on the current page without any need to refresh the

My website currently features a login form at the top of each page for users to input their username and password. Once the submit button is clicked, I utilize jQuery AJAX method to send the data to login.php without refreshing the page. Here, the credenti ...

javascriptphpjqueryajaxauthentication

NodeJS not recognizing global variable causing it to return undefined

Can a global variable be defined in a node.js function? I wish to use the variable "ko" (declared in the getNumbers function) in other functions function getNumbers(callback) { result = cio.query("SELECT numbers FROM rooms WHERE durum='1'", ...

javascriptnode.js

Storing data in cache and refreshing another object for a chart does not function properly

When working in my Controller, I am retrieving data from a $resource object that is stored in a caching service. $scope.data = myService.query(); //myService caches the response. Within the same controller, I am setting up the configuration for a chart ( ...

javascriptangularjs

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

Is there a way to utilize variables from a source XML file to establish points on an SVG polygon?

I've been struggling to figure out if it's possible to dynamically set points on an SVG polygon using variables that are defined by an XML document which is constantly changing. All I want is to set the path like this: var polygonToUse = window. ...

javascriptsvgpolygonpoint

Show or hide side menu depending on when a div reaches the top of the

I have a side menu that opens when a specific div reaches the top of the window. The menu includes a toggle button for opening and closing it. However, I am encountering an issue where the script keeps closing the menu on scroll even after manually openi ...

javascripthtmljquerycss

What is the best way to achieve a column layout using Bootstrap?

I'm having difficulty adjusting the column width in Bootstrap columns to my specific needs. Check out this link for more information: : https://i.sstatic.net/Tvdef.png What I'm trying to achieve is to keep the label column width fixed while all ...

htmlcsstwitter-bootstrapbootstrap-4

Implementing a Pagination Component in React JS using Ant Design to Display 4 Products on Each Page

Is there a way to display 4 products on every page using the ant design Pagination component in React JS? My goal is to have 4 products shown on each page using the ant design pagination while also incorporating search and filtering functionalities. Curre ...

javascriptreactjspaginationantd

The content division is stretching too far in height at 100%

I'm struggling with ensuring that my content container div extends to the bottom of the page properly, even when the content itself is short and does not fill the entire page. The issue is that the container continues past the bottom of the page in su ...

csshtml

Tips on implementing SCSS styles in my create-react-app application along with Material UI components?

I recently developed a React app using Create-React-App, and now I am looking to incorporate Material UI with styling through SCSS. https://i.sstatic.net/JLEjX.png To manage my styles, I created a main.css file using node-sass. While attempting to apply ...

cssreactjssassmaterial-ui