Forums: Front End:

Okay, I'll try to explain this as simply as possible. I want to, dynamically, most likely with a javascript function, change the properties of a CSS style. Currently, I've crafted some code that will allow me to change/apply a style to a specific DIV -- targeting the ID of it. This is great...

Here is a sample of the code:

<style type="text/css">
<!--
.theStyle {

	width: 150px;
	height: 150px;
	visibility: hidden;
	background-color:#CCCCCC;
}
-->
</style>

<script language="JavaScript">
	function makeVis(divID) {
		document.getElementById(divID).style.visibility = "visible";
	}
</script>

<div id="theDivNameOne" class="theStyle" align="center"> The First Div </div>
<div id="theDivNameTwo" class="theStyle" align="center"> The Second Div </div>

<a href="javascript:makeVis('theDivNameOne');">Make One Visible</a> | <a href="javascript:makeVis('theDivNameTwo');">Make Two Visible</a>

<a href="javascript:makeVis('theStyle');">Make Them ALL Visible</a>

as far as I know (which isn't very far with JavaScript...) JS cannot change the CSS rules for a doc at all - so you need another plan.

What you need is to get all the elements (the DIVs the Ps the SPANs etc) that have a specific class into an array - then you loop through that array and make each element visible (or set it to another class or whatever else).

There seem to be a number of functions out there called getElementsByClassName or something similar that will get you that array.

Here's one - snook.ca/archives/000370.php
I haven't tried it myself, just found it in Google.

Well after about 10 to 12 hours of searching, reading, and tinkering I've done it! I am CSS/JS code Ninja today!


Here is a working example.


The JS code used is as follows:

<script language="JavaScript">
function changeRule(theNumber) {
	var theRules = new Array();
	if (document.styleSheets[0].cssRules) {
		theRules = document.styleSheets[0].cssRules;
	} else if (document.styleSheets[0].rules) {
		theRules = document.styleSheets[0].rules;
	}
	theRules[theNumber].style.backgroundColor = '#FF0000';
}
</script>

nice one.

*lives*
*learns*

Yeah... it does indeed rock... The reason for me looking for it was to hide any flash elements when a special CSS layer shows up over top of everything. I can switch the visibility of any flashDiv to hidden.