Please note that this will not return values from a <style> tag block in the head of the page nor will it return values from linked external stylesheets. Support for doing that is patchy accross different browser platforms although all modern browsers have their own ways of getting this to work.
Accessing and changing external and <style> values is possible in a cross-browser manner when using JQuery.
Note: Notice that CSS attribute names are no longer hypenated as they are in strict CSS notation. Instead they are presented in Camel-case. So, the CSS attribute:
Note the lack of space between "font" and "Family" and that "Family" has an uppercase F. This is also the case when using CSS attributes in jQuery.
The following code draws three buttons and a <div>. Each of the buttons change the colour of the <div> block above them and also the text within the block.
Now open the stylesheets exercise and work through it.