RSS: Change CSS class/style with Javascript. Last twenty posts from Change CSS class/style with Javascript. /forum_thread/view/31411 Reply by Flip 2006.06.26, 04:16PM http://beta.twelvestone.com/forum_thread/view/31411#495494 2006-06-26T16:16:18+00:00 Reply by DontBogartMe 2006.06.26, 03:36PM
*lives*
*learns* ]]> http://beta.twelvestone.com/forum_thread/view/31411#495480 2006-06-26T15:36:28+00:00 Reply by Flip 2006.06.26, 02:45PM

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>


I've tested this on FF(Mac), Safari(Mac), O9(Mac), IE5(Mac), IE6(PC), FF(PC) and they all work. The reason for the 'if' statement is some of the browsers use cssRules... some use just rules... And the only other hair is that you can't use "background-color" to refer to the style, you have to get rid of the hyphen and capitalize the first letter after the hyphen.

To refer to the first CSS rule you'd use "changeRule(0)", the second "changeRule(1)" and the third "changeRule(2)" and so on...


I haven't found a browser it doesn't work on.... yet.... ]]> http://beta.twelvestone.com/forum_thread/view/31411#495464 2006-06-26T14:45:45+00:00 Reply by DontBogartMe 2006.06.25, 08:50AM
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. ]]> http://beta.twelvestone.com/forum_thread/view/31411#495355 2006-06-25T08:50:06+00:00 Reply by Flip 2006.06.24, 11:19PM
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>


When I click 'Make One Visible' it will make 'theDivNameOne' show up. The second will stay hidden. And the same works with 'Make Two Visible'.




Now here comes the part I can't figure out.

I want to change the style by targetting the actual style/class that is specified in the CSS code -- not by targetting the actual DIV. So if I could do something like:


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


Any DIV, SPAN, P or anything that has 'class="theStyle"' applied to it, will change... It actually changes the class/style rather than changing the class/style of a specific item.



Any ideas? ]]> http://beta.twelvestone.com/forum_thread/view/31411#495331 2006-06-24T23:19:59+00:00