Menu
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.
288
The CSS of an element can be obtained using the getComputedStyle element function in JavaScript. It returns a JavaScript object containing CSS properties and their values. This object is indexed and iterable over the property names. The getPropertyValue(property) is used to get the value of a property.
Install "eXtract Snippet"=> Inspect an element using chrome's developer tools 'inspect element'. Within the developer tools you should also see a panel named "eXtract HTML CSS". Click on to the "eXtract HTML CSS" panel and further click onto the "Get HTML/CSS of inspected element" button withing the panel.
Chrome Dev tools Copy CSS Styles Open dev tools. Right-click an element in the Elements panel. Copy > Copy styles. Paste them where needed.
The CSS Universal Selector The universal selector (*) selects all HTML elements on the page.
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; } Beware that getComputedStyle literally returns the computed values. Meaning relative units such as em will be returned as computed px values (as seen in the computed tab of your browser's devtools).
Depending on your desired outcome, this might completely invalidate it as a viable solution. The other answers - including the accepted one - have failed to mention it entirely, though.
Not enough rep to comment hence this separate answer.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
