How To Display All Css Selectors & Properties In A Textarea?

I am trying to display a set of CSS properties in a textarea using JavaScript: var exampleone = document.getElementById('th001'); var borderbox = window.getComputedStyle(exampleon

Solution 1:

Updated answer

There is a helpful topic here:

How to get the applied style from an element, excluding the default user agent styles

I tried to enhance the solution provided in this topic to better fit your needs by…

• Adding a parameter to be able to choose whether or not to include inline style,
• Adding a function to correctly indent the styles,
• Trying to simplify some code.

var proto = Element.prototype;
var slice = Function.call.bind(Array.prototype.slice);
var matches = Function.call.bind(proto.matchesSelector ||
  proto.mozMatchesSelector || proto.webkitMatchesSelector ||
  proto.msMatchesSelector || proto.oMatchesSelector);

// Returns true if a DOM Element matches a cssRulevar elementMatchCSSRule = function(element, cssRule) {
  // console.log(cssRule) //.selectorText.split(":")[0]); // Testing to add hoverreturnmatches(element, cssRule.selectorText);
};

// Returns true if a property is defined in a cssRulevar propertyInCSSRule = function(prop, cssRule) {
  return prop in cssRule.style && cssRule.style[prop] !== '';
};

// Here we get the cssRules across all the stylesheets in one arrayvar cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {
  return rules.concat(slice(styleSheet.cssRules));
}, []);

// Get only the css rules that matches that elementvar getAppliedCSS = function(elm) {
  var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));
  var rules = [];
  if (elementRules.length) {
    for (i = 0; i < elementRules.length; i++) {
      rules.push({
        order: i,
        text: elementRules[i].cssText
      })
    }
  }
  return rules;
}

// TAKIT: Added this function to indent correctlyfunctionindentAsCSS(str) {
  return str.replace(/([{;}])/g, "$1\n ").replace(/(\n[ ]+})/g, "\n}");
}

functiongetStyle(elm, lookInHTML = false) { // TAKIT: Added the new parameter herevar rules = getAppliedCSS(elm);
  var str = '';
  for (i = 0; i < rules.length; i++) {
    var r = rules[i];
    str += '/* CSS styling #' + r.order + ' */\n' + r.text;
  }
  
  // TAKIT: Moved and simplified the below from the other function to hereif (lookInHTML && elm.getAttribute('style')) // TAKIT: Using the new parameter
    str += '\n/* Inline styling */\n' + elm.getAttribute('style');
  
  returnindentAsCSS(str);
}

// Output in textareavar exone = document.getElementById("exone");
var result = document.getElementById("result");
result.value = getStyle(exone, true); // TAKIT: Using the new parameter for inline style

#exone {
  border-style: solid;
  border-width: 2px;
  border-color: rgba(57, 165, 255, 1.00);
  width: 150px;
  height: 30px;
  position: relative;
  text-align: center;
  background-color: transparent;
  color: black;
}

#exone:hover {
  cursor: pointer;
  background-color: rgba(57, 165, 255, 1.00);
  color: white;
}

#result {
  width: 90%;
  height: 240px;
}

<divid="exone"style="opacity: 0.95;"></div><textareaid="result"></textarea>

(I'm trying to add the :hover style to the output too, but I can't make it to work)

⋅ ⋅ ⋅

---

Old answer(When I hadn't found anything helpful yet)

As the .getComputedStyle doesn't make any difference between the one that are present in the CSS and the other ones, it seems complicated to differenciate them.

So, here is an attempt of that:

• I've made a loop to compare the element exone with another reference element that has not been stylized using CSS,
• It seems that the element we take in reference must be on the page to effectively compare them, so I've put it in the HTML.
• In the loop, if the values are the same, that must mean that both of them are not stylized, so, we skip to the next item.

I ended-up with that snippet:

// Get style of our example elementvar exampleone = document.getElementById('exone');
var styles_one = window.getComputedStyle(exampleone);

// Get style of a reference element without CSSvar reference = document.getElementById('exref');
var styles_ref = window.getComputedStyle(reference);

// Loop and compare our example element with the reference elementvar results = {};
for (var key in styles_ref) {
  if(key.includes('webkit')) continue;             // Next if webkit prefixif(styles_one[key] == styles_ref[key]) continue; // Next if same value as the ref
  results[key] = styles_one[key];                  // Copy value in results[key]
}
delete results.cssText; // Useless in our case// Output in consoleconsole.log(results);

#exone {
  border-style: solid;
  border-width: 2px;
  border-color: rgba(57, 165, 255, 1.00);
  width: 150px;
  height: 30px;
  position: relative;
  text-align: center;
  background-color: transparent;
  color: black;
}

#exone:hover {
  cursor: pointer;
  background-color: rgba(57, 165, 255, 1.00);
  color: white;
}

<divid="exone"></div><divid="exref"></div>

The console should display only the CSS that differs from the not stylized reference element… So, this must come from the CSS!

Now, we only need to format a little this output and put it in a textarea.

Feel free to comment.

Hope it helps.