Forum Moderators: open
Here's the deal:
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>
<!-- This is the style in question -->
<style type="text/css">
.javascript_only { display: none }
</style>
</head>
<body>
<!-- This is where the style is applied -->
<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]
[edited by: Trace at 6:47 pm (utc) on Aug. 27, 2007]
<html>
<head>
<!-- This is the style in question -->
<style type="text/css">
.javascript_only { display: none }
</style>
</head>
<body>
<!-- This is where the style is applied -->
<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.if(document.styleSheets){
var sheet = document.styleSheets[0]
if(sheet){
var ssRules = sheet.cssRules ¦¦ sheet.rules;
if(ssRules){
var result = null;
for(var c = 0; c < ssRules.length;c++){
if(ssRules[c].selectorText == ".javascript_only"){
result = ssRules[c].style;
break;
}
}
if(result){
result.display = "block";
}
}
}
}// 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>
Is that what you're looking for?
It takes a little explaining...
The first IF statement checks to see if there is a style sheet then sets the collection to ssRules, in the W3C version the collection is called "cssRules" and on IE it is called "rules", so: var ssRules = sheet.cssRules ¦¦ sheet.rules;
It took a little googling, but it seems to work pretty well.
As always, remember to change the 2 ¦¦ to actual pipes for this to work
Thanks!
I found that I can't use styleSheets[0]. I have to use styleSheets[styleSheets.length-1].
Thanks. This is a place to start.
I just need to spend some time figuring it out. I'm sure I'll get it. The ¦¦ thing is a good idea.
