Nick wrote:
Hello,
I am trying to edit a CSS rule with Javascript, which is for printing. Thus
@media print
{
#footer { display: none; }
}
I would like to be able to access the display attribute of #footer, but
I can't get to it. If I edit the element.style.display property then
that changes it, but for all the stylesheet, not just print.
You did not specify where is your CSS table: inline or from an external
file (in the latter case it gets even more funny :-).
Presuming you have an inline style declaration:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
@media all {
body { background-color: white; }
}
@media screen {
#footer { display: block; }
}
@media print {
#footer { display: none; }
}
</style>
<script type="text/javascript">
function test() {
// To get media.print::footer.display in IE:
//alert(document.styleSheets[0].rules[2].style.display);
// To get media.print::footer.display in FF:
// alert(ss.cssRules[2].cssRules[0].style.display);
// To get media.print::footer.display in Opera:
// Have no idea: window and document seems do not expose
// any scriptable object for style (?)
// Other browsers may be even more amazing (?)
}
</script>
</head>
<body onload="test()">
<div id="footer">Footer</div>
</body>
</html>
I would suggest to reverse your logic: instead of patching the CSS
table - change style attributes of elements themselve using className()
and/or setAttribute() methods. This way you'll get much more reliable
anduniversal solution.
