Write a function to find all the elements with the given color. Here the color will be provided in any format like, plain text (white
), HEXA value (#fff
or #ffffff
), or RGB value (RGB(255, 255, 255)
).
Example
Input: <div id="root"> <span style="color:#fff;">1</span> <span style="color:#eee;">2</span> <span style="color:white;">3</span> <span style="color:rgb(255, 255, 255);">4</span> </div> findElementByColor(document.getElementById('root'), 'rgb(255, 255, 255)'); Output: [ <span style="color:#fff;">1</span>, <span style="color:white;">3</span>, <span style="color:rgb(255, 255, 255);">4</span> ]
The most challenging part of this problem is to convert the color values to a single format that can be used for the comparison.
For this, we can create a function that will temporarily create a new element and apply the input color as its style, then using the getComputedStyle() method, we can get the RGB value of the color and convert it to HEXA code for comparison.
function getHexColor(color){ // create a new element const div = document.createElement('div'); // apply the color to the element div.style.color = color; // get the computed style of the div let colors = window.getComputedStyle(document.body.appendChild(div)); // get the RGB value of the color colors = colors.color.match(/\d+/g).map(function(a){ return parseInt(a, 10); }); // remove the div document.body.removeChild(div); // convert the RGB value to HEXA and return it. return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false; }
For finding the elements with the given color value, we will first convert the input color value to the HEXA using this function.
Then recursively traverse all the DOM elements and get their color values and convert them to HEXA and compare it with the input color value's HEXA.
If they match, push the element to the result array and return it.
function findElementByColor(element, colorValue){ // convert input color to HEXA const inputColorHexa = getHexColor(colorValue); // to store the result const result = []; // helper function to traverse the DOM const search = (element, attrValue) => { // get the color value of the element let value = element.style['color']; // convert the value to the HEXA value = getHexColor(value); // if both the HEXA value matches // store the result if(value === inputColorHexa){ result.push(element); } // recursively search for each child of the element for(const child of element.children) { search(child, attrValue); } }; // begin the search search(element, colorValue); // return the result return result; }
Input: <div id="root"> <span style="color:#fff;">1</span> <span style="color:#eee;">2</span> <span style="color:white;">3</span> <span style="color:rgb(255, 255, 255);">4</span> </div> console.log(findElementByColor(document.getElementById('root'), 'white')); Output: [ <span style="color:#fff;">1</span>, <span style="color:white;">3</span>, <span style="color:rgb(255, 255, 255);">4</span> ]