Change CSS Class property using javascript?

Noozer · Dec 5, 2004

I have several tags on a webpage of the same class. If the user clicks a
specific checkbox I'd like to be able to alter the display property of the
class, affecting all objects of that class.

This is an intranet application so we know that javascript will be enabled
and the browser will be IE.

How can I affect all the members of this class? Is there a way I can toggle
the DISPLAY property of a class so all the elements using that class would
be affected?

ie:

default.css file contains the following and is included into the HTLM
document:

.topicone { display:none; }
.topictwo { display:none; }

Relevant section of HTML code:
<input type="checkbox" onclick="flip('topicone')'">Show me information
about topic one.<br>
<input type="checkbox" onclick="flip('topictwo')'">Show me information
about topic two.<br>
<p>Please see the following:</p>
<p> Quick Points </p>
<p class="topicone">This is some information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
<p> Details </p>
<p class="topicone">More information about topic one.</p>
<p class="topicone">More information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>

RobB · Dec 6, 2004

Noozer said:
I have several tags on a webpage of the same class. If the user clicks a
specific checkbox I'd like to be able to alter the display property of the
class, affecting all objects of that class.

This is an intranet application so we know that javascript will be enabled
and the browser will be IE.

How can I affect all the members of this class? Is there a way I can toggle
the DISPLAY property of a class so all the elements using that class would
be affected?

ie:

default.css file contains the following and is included into the HTLM
document:

.topicone { display:none; }
.topictwo { display:none; }

Relevant section of HTML code:
<input type="checkbox" onclick="flip('topicone')'">Show me information
about topic one.<br>
<input type="checkbox" onclick="flip('topictwo')'">Show me information
about topic two.<br>
<p>Please see the following:</p>
<p> Quick Points </p>
<p class="topicone">This is some information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
<p> Details </p>
<p class="topicone">More information about topic one.</p>
<p class="topicone">More information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>

Not really enough information, but...IE-only:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

body {
font: normal 90% verdana;
}
..topicone {
font: normal 80% verdana;
color: #600;
display: none;
}
..topictwo {
font: normal 80% verdana;
color: #060;
display: none;
}

</style>
<script type="text/javascript">

function IE_set_class(clanSheetame)
{
var re = new RegExp(clanSheetame);
var rules, nRule,
nRules, SS, nSheet = 0,
nSheets = document.styleSheets.length;
for (nSheet; nSheet < nSheets; ++nSheet)
{
SS = document.styleSheets.item(nSheet);
rules = SS.rules;
nRules = rules.length;
for (nRule = 0; nRule < nRules; ++nRule)
{
rule = SS.rules.item(nRule);
if (re.test(rule.selectorText))
{
for (var a = 1; a < arguments.length; a+=2)
rule.style[arguments[a]] = arguments[a + 1];
return;
}
}
}
}

function toggleclass(obj)
{
var dval = obj.checked ? 'block' : 'none';
IE_set_class(obj.value, 'display', dval)
}

onload = function()
{//keep things in sync
var i = 0,
ipt,
ipts = document.getElementsByTagName('input');
while (ipt = ipts.item(i++))
if (/toggle/i.test(ipt.name))
ipt.onclick();
}

</script>
</head>
<body>
<form>
<input type="checkbox" name="toggle" value="topicone"
onclick="toggleclass(this)">Show me information
about topic one.<br>
<input type="checkbox" name="toggle" value="topictwo"
onclick="toggleclass(this)">Show me information
about topic two.<br>
<p>Please see the following:</p>
<p> Quick Points </p>
<p class="topicone">This is some information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
<p> Details </p>
<p class="topicone">More information about topic one.</p>
<p class="topicone">More information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
</form>
</body>
</html>

RobG · Dec 6, 2004

Rob said:
...lol - I did a S&R to change var 'SSn' to 'nSheet' and it also changed
'classname' to 'clanSheetame' which sounds vaguely Scottish. I am sorry.

And here I was thinking you were being creative. Shazam!

How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Stuck with html and css	25	Dec 14, 2022
Reversing output of user input by using while loop...	2	Sep 1, 2022
Alter the properties of a CSS class?	3	Dec 5, 2004
Javascript scroll to sections and also scroll to section but open relevant nav-tab	4	Feb 25, 2022

Change CSS Class property using javascript?

Noozer

RobB

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads