Identify specific elements using CSS to easily target them with JavaScript later on

Question

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. However, an issue arises as style.backgroundColor only returns the color if an inline style is applied.

To see my attempt in action, you can check out this demo here.

The CSS I used is as follows:

div{background-color: lightgrey;}

And for the JavaScript part:

alert(document.getElementById("myDiv").style.backgroundColor);

I am currently looking for a solution to make color detection work without relying on inline styles or maybe someone has a better suggestion on how to identify affected elements by CSS selectors. It's worth noting that I would like to avoid using jQuery for this task.

javascript html css

Answer 1

Answer №1

element.style is limited to returning inline style declarations or those added in JS using elements.style['foo'] = "bar". Keep in mind that CSS declarations with !important can override inline styles, and multiple CSS declarations may overwrite each other based on selector precedence rules.

To accurately determine the applied rule, use the getComputedStyle method: http://jsfiddle.net/qUDjb/31/

window.getComputedStyle(document.getElementById("myDiv"))['background-color']

MDN provides more information on getComputedStyle

If you aim to select elements by background color, consider obtaining a collection of elements and filtering them by computed style value: http://jsfiddle.net/qUDjb/36/

CSS

p:nth-child(2n) {
     background-color:lightgrey;
}

JS

var getElementsByBackgroundColor = function( collection, color ){
    // convert the color string to browser format
    var div = document.createElement('div');
        div.style.backgroundColor = color;
    var computedColor = div.style.backgroundColor;

    // compare computed background color and return matching elements
    return [].slice.call( collection ).filter( function( item ){
       return window.getComputedStyle( item )['background-color'] == computedColor;
    });
}
console.log( getElementsByBackgroundColor( document.querySelectorAll('p'), 'lightgrey') );

Answer 2

element.style is limited to returning inline style declarations or those added in JS using elements.style['foo'] = "bar". Keep in mind that CSS declarations with !important can override inline styles, and multiple CSS declarations may overwrite each other based on selector precedence rules.

To accurately determine the applied rule, use the getComputedStyle method: http://jsfiddle.net/qUDjb/31/

window.getComputedStyle(document.getElementById("myDiv"))['background-color']

MDN provides more information on getComputedStyle

If you aim to select elements by background color, consider obtaining a collection of elements and filtering them by computed style value: http://jsfiddle.net/qUDjb/36/

CSS

p:nth-child(2n) {
     background-color:lightgrey;
}

JS

var getElementsByBackgroundColor = function( collection, color ){
    // convert the color string to browser format
    var div = document.createElement('div');
        div.style.backgroundColor = color;
    var computedColor = div.style.backgroundColor;

    // compare computed background color and return matching elements
    return [].slice.call( collection ).filter( function( item ){
       return window.getComputedStyle( item )['background-color'] == computedColor;
    });
}
console.log( getElementsByBackgroundColor( document.querySelectorAll('p'), 'lightgrey') );

Identify specific elements using CSS to easily target them with JavaScript later on

Answer №1

Similar questions

Having trouble getting CSS Animation to work in a React project?

Encountering errors with passport-google-oauth20: InternalOAuthError arises when fetching user profile fails and attempting to set headers after they have already been sent to the client

Position the Bootstrap button on the right side

Enhance your webpage by incorporating various icons and custom spacing using Font Awesome and CSS content

Issues may arise in TypeScript when you are working with an array of objects along with other properties within a type

Ways to selectively implement the callback of setState using hooks in specific locations, rather than applying it universally

Tips for efficiently utilizing both client-server side rendering and static generation rendering in web development

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

activating javascript function in rails when the page reloads

"Sending a POST request from the smartphone application client developed using the Meteor

Overflow causes flexbox to become unreactive

Ways to extract information immediately after using the .load method

Issue encountered when attempting to serve JSON response using Node.js, express, and MongoDB after the initial response

What is the process for transforming a promise outcome into JSON format?

How to modify the background color in Material Ui's datepicker?

Using jQuery, prevent the user from entering text into an input box when a checkbox

Distance Calculator for Geolocation WatchPosition

Initiating and handling a POST request

steps for setting up babel-cli and babel-preset-react

Sending a PDF document and JSON data via an AJAX POST request