Retrieve CSS styles from an element and all of its descendants in a recursive manner

Question

Retrieve CSS styles from an element and all of its descendants in a recursive manner

I am looking to achieve the following functionality:

getRecursiveCSS(document.getElementById('#menubar'))

When called, this function should return a string of CSS for the main element and all its child elements.

I have attempted the following implementation (which is not functioning as expected):

function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

function styleRecursive(elements, css) {
    elements = Object.prototype.toString.call(elements) === '[object Array]' ? elements: [elements];
    if (elements.length == 0 || typeof elements[0] == 'undefined')
        return css;

    if (typeof elements[0].querySelector == 'undefined')
        return css

    if (typeof css == 'undefined')
        css = fullPath(elements[0]) + '{' + getComputedStyle(elements[0]).cssText + '}';
    else
        css += fullPath(elements[0]) + '{' + getComputedStyle(elements[0]).cssText + '}';

    _elements = [];

    for (var i = 0; i < elements.length; i++) {
        for (var ii = 0; ii < elements[i].childNodes.length; ii++)
            _elements.push(elements[i].childNodes[ii]);
    }

    return styleRecursive(_elements, css);
};

javascript html css

Answer 1

Answer №1

I have devised a solution that may spark ideas on how to enhance your code. To test this code, I created an element with children at varying depths and utilized a recursive approach to traverse all the children based on their depth to extract their CSS properties. Subsequently, all discovered CSS properties along with the element names are stored in an object structure (resembling JSON) for future reference.

Important Notes:
1) This code is not entirely foolproof; additional conditions and checks must be incorporated to ensure seamless functionality across various scenarios.
2) The code has been tested in Google Chrome browser.
3) Currently supports classes only for locating elements and their children, but can be easily extended to include IDs and tags as well.

Output:

one: {
  display: "block",
  position: "relative"
}
two: {
  display: "inline-block",
  font-family: "Montserrat"
}
three_1: {
  display: "table",
  position: "absolute",
  left: "0px"
}
four_1: {
  display: "table-cell",
  position: "relative"
}
three_2: {
  display: "table",
  position: "absolute",
  right: "0px"
}
four_2: {
  display: "table-cell",
  position: "relative"
}

HTML(Sample):

<div class="one">
    <div class="two">
        <div class="three_1">
            <div class="four_1"></div>
        </div>
        <div class="three_2">
            <div class="four_2"></div>
        </div>
    </div>
</div>

CSS(Sample):

.one {display:block;position:relative;}
.two {display:inline-block;font-family:'Montserrat';}
.three_1 {display:table;position:absolute;left:0;}
.three_2 {display:table;position:absolute;right:0;}
.four_1 {display:table-cell;position:relative;}
.four_2 {display:table-cell;position:relative;}

JS:

function convertObjlike(css) {
    var obj = {};
    if (!css) return obj;
    css = css.split("; ");
    for (var i in css) {
        var prop = css[i].split(": ");
        obj[prop[0].toLowerCase()] = prop[1];
    }
    return obj;
}

function getCss(selector) {
    var stylesheets = document.styleSheets, result = {};
    for (var i in stylesheets) {
        var rules = stylesheets[i].rules || stylesheets[i].cssRules;
        for (var r in rules) {
            if (selector === rules[r].selectorText) {
                result = convertObjlike(rules[r].style.cssText);
            }
        }
    }
    return result;
}

var styleObject = {};
function processStyles(element){
  styleObject[element.className] = (getCss('.'+element.className));
  var childNodes = element.children;

  for (var i = 0; i < childNodes.length; i++) {
    processStyles(childNodes[i])
  }
}

processStyles( document.querySelector('.one') );
console.log(styleObject);

Jsfiddle Link

Answer 2

I have devised a solution that may spark ideas on how to enhance your code. To test this code, I created an element with children at varying depths and utilized a recursive approach to traverse all the children based on their depth to extract their CSS properties. Subsequently, all discovered CSS properties along with the element names are stored in an object structure (resembling JSON) for future reference.

Important Notes:
1) This code is not entirely foolproof; additional conditions and checks must be incorporated to ensure seamless functionality across various scenarios.
2) The code has been tested in Google Chrome browser.
3) Currently supports classes only for locating elements and their children, but can be easily extended to include IDs and tags as well.

Output:

one: {
  display: "block",
  position: "relative"
}
two: {
  display: "inline-block",
  font-family: "Montserrat"
}
three_1: {
  display: "table",
  position: "absolute",
  left: "0px"
}
four_1: {
  display: "table-cell",
  position: "relative"
}
three_2: {
  display: "table",
  position: "absolute",
  right: "0px"
}
four_2: {
  display: "table-cell",
  position: "relative"
}

HTML(Sample):

<div class="one">
    <div class="two">
        <div class="three_1">
            <div class="four_1"></div>
        </div>
        <div class="three_2">
            <div class="four_2"></div>
        </div>
    </div>
</div>

CSS(Sample):

.one {display:block;position:relative;}
.two {display:inline-block;font-family:'Montserrat';}
.three_1 {display:table;position:absolute;left:0;}
.three_2 {display:table;position:absolute;right:0;}
.four_1 {display:table-cell;position:relative;}
.four_2 {display:table-cell;position:relative;}

JS:

function convertObjlike(css) {
    var obj = {};
    if (!css) return obj;
    css = css.split("; ");
    for (var i in css) {
        var prop = css[i].split(": ");
        obj[prop[0].toLowerCase()] = prop[1];
    }
    return obj;
}

function getCss(selector) {
    var stylesheets = document.styleSheets, result = {};
    for (var i in stylesheets) {
        var rules = stylesheets[i].rules || stylesheets[i].cssRules;
        for (var r in rules) {
            if (selector === rules[r].selectorText) {
                result = convertObjlike(rules[r].style.cssText);
            }
        }
    }
    return result;
}

var styleObject = {};
function processStyles(element){
  styleObject[element.className] = (getCss('.'+element.className));
  var childNodes = element.children;

  for (var i = 0; i < childNodes.length; i++) {
    processStyles(childNodes[i])
  }
}

processStyles( document.querySelector('.one') );
console.log(styleObject);

Jsfiddle Link

Answer 3

Answer №2

Note: Please be aware that the solution provided here generates an HTML copy and not a CSS 'file'.

Below is my approach. It retrieves all computed styles of the element and saves them in the style attribute. The class attribute is also removed since it is generally used for setting those styles only (you can keep the removeAttribute call if needed). Additionally, it recursively computes the resulting HTML by iterating through its children.

The resulting HTML may appear large because many styles are default values, and it does not consider optimized inheritance of styles. Therefore, each child ends up receiving all its styles again. Importing/registering font faces separately might be necessary.

Hover effects and media queries are not copied over as getComputedStyle captures the current state of the node only. Relative units like vw, vh, %, etc., are converted to their equivalent absolute values. Similarly, variables are not retained; instead, their values are utilized.

function getElemHtml(elem) {
    let style = [], computed = window.getComputedStyle(elem)
    for (const attr of computed) style.push(`${attr}:${computed[attr]}`)
    let clone = elem.cloneNode()
    clone.setAttribute('style', style.join(";"))
    clone.removeAttribute('class')
    let childrenHTML = ''
    for (const child of elem.childNodes) childrenHTML += child.nodeType === Element.ELEMENT_NODE ? getElemHtml(child) : child.nodeType === Element.TEXT_NODE ? child.nodeValue : ''
    clone.innerHTML = childrenHTML
    return clone.outerHTML
}

const elem = document.querySelector("p")
const elemHtml = getElemHtml(elem)
document.querySelector("code").innerText = elemHtml

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

pre, code {
  width: 90vw;
  white-space: pre-wrap;
}

<p>Hello</p>

<pre><code></code></pre>

Answer 4

Note: Please be aware that the solution provided here generates an HTML copy and not a CSS 'file'.

Below is my approach. It retrieves all computed styles of the element and saves them in the style attribute. The class attribute is also removed since it is generally used for setting those styles only (you can keep the removeAttribute call if needed). Additionally, it recursively computes the resulting HTML by iterating through its children.

The resulting HTML may appear large because many styles are default values, and it does not consider optimized inheritance of styles. Therefore, each child ends up receiving all its styles again. Importing/registering font faces separately might be necessary.

Hover effects and media queries are not copied over as getComputedStyle captures the current state of the node only. Relative units like vw, vh, %, etc., are converted to their equivalent absolute values. Similarly, variables are not retained; instead, their values are utilized.

function getElemHtml(elem) {
    let style = [], computed = window.getComputedStyle(elem)
    for (const attr of computed) style.push(`${attr}:${computed[attr]}`)
    let clone = elem.cloneNode()
    clone.setAttribute('style', style.join(";"))
    clone.removeAttribute('class')
    let childrenHTML = ''
    for (const child of elem.childNodes) childrenHTML += child.nodeType === Element.ELEMENT_NODE ? getElemHtml(child) : child.nodeType === Element.TEXT_NODE ? child.nodeValue : ''
    clone.innerHTML = childrenHTML
    return clone.outerHTML
}

const elem = document.querySelector("p")
const elemHtml = getElemHtml(elem)
document.querySelector("code").innerText = elemHtml

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

pre, code {
  width: 90vw;
  white-space: pre-wrap;
}

<p>Hello</p>

<pre><code></code></pre>

Retrieve CSS styles from an element and all of its descendants in a recursive manner

Answer №1

Answer №2

Similar questions

The array is not receiving the objects as intended

In angular.js, repeating elements must be unique and duplicates are not permitted

Is there a way to ensure that the code only runs if the promise has been successfully fulfilled

Stop :hovering on the link for iPad

A seamless border encircling an inline span accompanied by consistent line spacing

Insert the GET object into an empty object within the data and then send it back

Accessing specific values from a JSON object in JavaScript

How come modifying the css of one component impacts all the other components?

The recursive JavaScript function is not returning as expected when using defer

Display the console.log output of NodeJs on an HTML webpage

node.js is reporting that it cannot locate some of the modules

Unable to successfully implement the CSS not selector

jquery ajax not ready - responsetext empty - status code 0 - statustext error occurred

Using an external script to modify or call a Vue.js method

The gaps separating rows

Troubleshooting Blade Template HTML Coloration Problem in Atom

Can the manifest.json file be edited dynamically?

Is there a way to reverse the confirmation of a sweet alert?

(Angular) Employing *ngFor directive for populating a table

Send data containing special characters through a GET request in PHP