title: How to get all CSS of element
body: <p>I have been testing the Javascript CSS functions today and noticed that when .style.cssText is used it only gives me the CSS that i set with JS. </p>
  
  <p>I instead wanted to get all of the CSS for the elements so i am guessing that i am doing something wrong or perhaps need another function instead like getComputedStyle but for the whole CSS rather than single property values but i cannot find what i need when searching.</p>
  
  <p>So my question is how can i get the full CSS from the last part of my code like:</p>
  
  <pre><code>background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000; 
  </code></pre>
  
  <p>instead of the current shorter CSS that is output?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;style type="text/css" media="screen"&gt;
      .MyDiv001 {
          background-color: #ffcccc;
          font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;
      }
      .MyDiv002 {
          background-color: #ccffcc;
          font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
      }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="MyDiv001" class="MyDiv001"&gt;This is MyDiv001&lt;/div&gt;
  &lt;div id="MyDiv002" class="MyDiv002"&gt;This is MyDiv002&lt;/div&gt;
  &lt;br /&gt;&lt;hr&gt;&lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
  
  // Select the MyDiv001 element
  var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001
  
  // Set some style property values for MyDiv001
  MyDiv001.style.setProperty("font-size", "13px", null);
  MyDiv001.style.setProperty("color", "#ff0000", null);
  
  // Get the Computed Style for MyDiv001
  var MyDiv001Style = window.getComputedStyle(MyDiv001);
  
  // Show the MyDiv001 style property values
  document.write( "MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "&lt;br /&gt;");
  document.write( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "&lt;br /&gt;");
  document.write( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "&lt;br /&gt;&lt;br /&gt;");
  
  // Select the MyDiv002 element
  var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002
  
  // Set some style property values for MyDiv002
  MyDiv002.style.setProperty("font-size", "16px", null);
  MyDiv002.style.setProperty("color", "#0000ff", null);
  
  // Get the Computed Style for MyDiv002
  var MyDiv002Style = window.getComputedStyle(MyDiv002); 
  
  // Show the MyDiv002 style property values
  document.write( "MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "&lt;br /&gt;");
  document.write( "MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "&lt;br /&gt;");
  document.write( "MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "&lt;br /&gt;&lt;br /&gt;");
  
  // Not what i was expecting
  document.write( "MyDiv001 CSS = " + MyDiv001.style.cssText+ "&lt;br /&gt;"); // How do i get the full css?
  document.write( "MyDiv002 CSS = " + MyDiv002.style.cssText+ "&lt;br /&gt;"); // How do i get the full css?
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edit - I would like a answer that uses regular Javascript if possible, hopefully a fixed version of my code and the reason why it does not return the full CSS, thanks.</p>