Forum Moderators: not2easy
I want to declare a global CSS class, and then use JavaScript to change it after the page loads. It's part of an accessibility/degrading technique (Trick #1) [webmasterworld.com] I use.
Currently, I change the style of individual objects, but it would be a lot more convenient if I could just assign them a CSS class, which, by default, is set to display:none, then change the display property with JS to inherited or block.
The problem is that there does not seem to be a reasonable way to do it. After spending the weekend trawling through various discussions and tutorials, I have come up with dozens of ways to do what I already know, and a few references to changing stylesheets.
However, there does not seem to be a way to change a global style. Let me illustrate:
<html>
<head>
<style type="text/css">
.javascript_only { display: none }
</style>
</head>
<body>
<div id="js_only_div" class="javascript_only">This will only be displayed if JS is enabled</div>
<div>This will be displayed at all times.</div>
<noscript>This will only be displayed if there is no JS.</noscript>
<script type="text/javascript">
// I want to add code here to change the display property of javascript_only to block, but don't know how.
// This function will change it by ID, but I want to change the class itself, not individual objects.
function ChangeJSDivByID() {document.getElementById('js_only_div').style.display='block'}
</script>
</body>
</html>
I also did some DOM crawling, but that smells like hacking, and probably has a glass jaw (also, nothing I tried worked. CSS DOM seems a bit odd, compared to other stuff on the page).
Any ideas?
[addendum]I know that I can change stylesheets, but that seems to be an overly complex/delicate way to do something so absurdly simple.[/addendum]
Maybe I should post this over in the J&A Forum [webmasterworld.com]?
