Question

123

How to get all CSS of element

rated 0 times [ 125] [ 2] / answers: 1 / hits: 36223 / 11 Years ago, thu, february 21, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyonna

Add To Favorites

Follow

Total Points: 521

Total Questions: 104

Total Answers: 96

Location: Samoa

Member since Tue, May 3, 2022

2 Years ago

answered 12 Years ago albert · Accepted Answer

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;

}