How to get all CSS of element
css, dom, javascript
Solution
`MyDiv001.style.cssText` will return only inline styles, that was set by `style` attribute or property.
You could use getComputedStyle to fetch all styles applied to element. You could iterate over returned object to dump all styles.
function dumpCSSText(element){
var s = '';
var o = getComputedStyle(element);
for(var i = 0; i < o.length; i++){
s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
}
return s;
}
Problem
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. 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. So my question is how can i get the full CSS from the last part of my code like: ``` background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000; ``` instead of the current shorter CSS that is output? ``` <html> <head> <style type="text/css" media="screen"> .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; } </style> </head> <body> <div id="MyDiv001" class="MyDiv001">This is MyDiv001</div> <div id="MyDiv002" class="MyDiv002">This is MyDiv002</div> <br /><hr><br /> <script type="text/javascript"> // 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") + "<br />"); document.write( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />"); document.write( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />"); // 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") + "<br />"); document.write( "MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />"); document.write( "MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />"); // Not what i was expecting document.write( "MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css? document.write( "MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css? </script> </body> </html> ``` 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.