javascript - How to display all CSS selectors & properties in a textarea?

Question

I am trying to display a set of CSS properties in a textarea using JavaScript:

var exampleone = document.getElementById('th001');
var borderbox = window.getComputedStyle(exampleone).getPropertyValue('cursor');

    document.getElementById("csstextareadisp").value = borderbox;

However it only displays one element, which I have to specify.

I want the JavaScript to read all properties which exist in the CSS document and display them as seen in the CSS document, e.g.

.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;
}

My question is, is there a way I can use JavaScript to get it to display like that (seen above) in a textarea other than setting it to display using:

document.getElementById("csstextareadisp").value = ".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; 
 }";

Answer 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 cssRule
var elementMatchCSSRule = function(element, cssRule) {
  // console.log(cssRule) //.selectorText.split(":")[0]); // Testing to add hover
  return matches(element, cssRule.selectorText);
};

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

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

// Get only the css rules that matches that element
var 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 correctly
function indentAsCSS(str) {
  return str.replace(/([{;}])/g, "$1
 ").replace(/(
[ ]+})/g, "
}");
}

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

// Output in textarea
var 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;
}

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