innerHTML, innerText, and outerHTML don't work.
innerHTML certainly works. Providing that you have a valid reference to the <style> element that you want to extract; innerHTML will return the 'body' of the style; that is, any rules in the style, exactly as is is in the <style> itself. This behaviour was tested using code following this post, in Opera 9, Firefox 2, and
even Internet Explorer 5**.
**
EDIT: Sorry; that's Internet Explorer 6 not Internet Explorer 5...
For <link> elements, look at the 'href' attribute of a reference to any <link>, targetting only 'stylesheet' ones obviously. Some browsers (Opera 9, Firefox 2) will give you an absolute URL to the stylesheet; others may not be as helpful (IE5** just gives the href as specified in the link href). Depending on what you want to DO with the style information, will determine what to do with the href. In my example code below, I could use the href in one of my own <links>, and it would be like making any other (remote) stylesheet link. IF you wanted to read the content at a href; you might hit problems, specifically, Javascript wont permit you to download and inspect information from a domain other than that on which the script is a resident. The only way to get around that ( unless there IS a way speficially for stylesheets) , would be to use some kind of interim server side code; perhaps an XMLHTTP request asking your own server to download the CSS document and return the result to Javascript.
Which leads onto; why do anything like this in Javascript? You might want to try using something like Perl to download and dissect pages on your server; it would not be an enourmas task.
The pasted code is a contrived example; obviously, I wrote the code, so I don't need to go searching for the <link> and <style>, hence ids.
Since you say you can already get references to the objects that you need, I can't see a problem. Of course, I don't know what you're trying to do, but it shouldn't be too difficult to take the information returned from style.innerHTML or link.href; and put it into new objects on dynamic pages; this is also done in the given example, using a hacky window.document.write approach.
As MidiMagic said; if you have no control over these pages, you wont know which elements the CSS styles relate to ( and in what order ), or what Id-ing/classing policies these developers are using, etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylsheet" type="text/css" href="mystyle.css" id="linked"/>
<style type="text/css" id="inline">
body{
font-family:Arial, sans-serif;
font-weight:bold;
}
</style>
<script type="text/javascript">
function ripInlineStyle()
{
alert(document.getElementById("inline").innerHTML);
}
function ripLinkedStyle()
{
alert(document.getElementById("linked").href);
}
function ripAndDisplay()
{
var inline_style = document.getElementById("inline").innerHTML;
var targ = window.open( );
targ.document.write( "<html><head><style type='text/css'>" );
targ.document.write( inline_style );
targ.document.write( "</style></head><body>Took inline style:");
targ.document.write( inline_style );
targ.document.write( "<hr/> Could also have linked to:" );
targ.document.write( document.getElementById("linked").href );
targ.document.write("</body></html>" );
}
</script>
</head>
<body onload="ripAndDisplay();">
Page will launch a popup. Allow popup.
</body>
</html>