468,132 Members | 1,553 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,132 developers. It's quick & easy.

how do I get all the div's that have a certain style sheet class

How do I get all the div's on a page? I realize in IE I can use
document.all.

For the other browsers, I need to get an array of all the divs on the
page.

getElementByTagName()?????

Jul 23 '05 #1
9 12212
I'm trying to find all the divs that have the class name 'downDownNav'
and then I want to make them invisible. This isn't working. Why?

function closeDropDownNav() {
var arrayOfDivs = document.getElementsByTagName('div');
var howMany = arrayOfDivs.length - 1;

for (var i=0; i < howMany; i++) {
var thisDiv = arrayOfDivs[i];
var styleClassName = thisDiv.className.value;
if (styleClassName == 'dropDownNav') {
thisDiv.style.visibility='hidden';
thisDiv.style.height='1px';
thisDiv.style.display='none';
}
}
}

Jul 23 '05 #2
Ivo
<lk******@geocities.com> wrote
I'm trying to find all the divs that have the class name 'downDownNav'
and then I want to make them invisible. This isn't working. Why?

function closeDropDownNav() {
var arrayOfDivs = document.getElementsByTagName('div');
var howMany = arrayOfDivs.length - 1;
Why -1? Don't you want the last div?
for (var i=0; i < howMany; i++) {
var thisDiv = arrayOfDivs[i];
var styleClassName = thisDiv.className.value;
Make that:
var styleClassName = thisDiv.className;

The className is just that, the classname. It has no value property. Or
combine with the next line into:
if (thisDiv.className=='dropDownNav') {
if (styleClassName == 'dropDownNav') {
thisDiv.style.visibility='hidden';
thisDiv.style.height='1px';
thisDiv.style.display='none';


When setting display to none, it makes no difference how high or visible the
element is. You might as well set height to 1000px, it will simply not be
there.

HTH
--
Ivo
Jul 23 '05 #3
lk******@geocities.com wrote:
I'm trying to find all the divs that have the class name 'downDownNav'
and then I want to make them invisible. This isn't working. Why?


Then why not just set the visibility of that class to hidden?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #4
Randy Webb wrote:
lk******@geocities.com wrote:
I'm trying to find all the divs that have the class name 'downDownNav'
and then I want to make them invisible. This isn't working. Why?

Then why not just set the visibility of that class to hidden?


Having never done this, I figured I'd have a crack:

<html><head><title>Mod Style Play</title>

<style type="text/css">
.st1 {color: black; background-color: #aaaacc;}
.st2 {color: white; background-color: #333366; visibility: visible;}
</style>

<script type="text/javascript">

// Pass the classname to change
function modStyle(c) {

// get the stylesheets
var sheets = document.styleSheets;

// Go thru each sheet looking for the right class (selectorText)
for (var i=0, sl=sheets.length; i<sl; i++) {
var rules = sheets[i].cssRules;

// Now the rules...
for (var j=0, rl=rules.length; j<rl; j++) {

// Check selectorText is same as .className
if (rules[j].selectorText == '.'+c) {

// Now change the visibility property
rules[j].style['visibility'] = 'hidden';
}
}
}
}
</script>

</head><body>

<div class="st1">Here is div 1</div>
<div class="st2" onclick="modStyle(this.className)">Click
here to make all the divs with the same style (st2) go invisible</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>

</body><html>

Of course this is just play code, it wouldn't take much to be able to
specify the property and the value to change it to also (say make them
display none or change the background color).

It works in Safari and Firefox on Mac, any comments?

--
Rob
Jul 23 '05 #5
RobG wrote:
[...]
// Check selectorText is same as .className
if (rules[j].selectorText == '.'+c) {
Which will fail in IE as it puts an asterisk '*' in front of the
selectorText. Here's a modified version of your script that allows for
IE and also passes the selectorText, property and value:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Mod Style Play</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
..st1 {color: black; background-color: #aaaacc;}
..st2 {color: white; background-color: #333366;}
</style>
<script type="text/javascript">

// Pass the selectorText, property to change and value
function modStyle(c,p,v) {

// get the stylesheets
var sheets = document.styleSheets;

// Go thru each sheet looking for the right class (selectorText)
for (var i=0, sl=sheets.length; i<sl; i++) {
var rules = sheets[i].cssRules;

// Now the rules...
for (var j=0, rl=rules.length; j<rl; j++) {

// Check selectorText is same as c
// Allow for IE putting a * in front of selectorText

// Could just remove * but chose to use || instead
// var r = rules[j].selectorText.replace(/^\*/,'');

if (rules[j].selectorText == c ||
rules[j].selectorText == '*'+c ) {

// Now set the property to the value
rules[j].style[p] = v;
}
}
}
}
</script>
</head><body>
<div class="st1" onclick="
modStyle('.st2','display','');
">Here is div 1 - click to show st2 again</div>
<div class="st2" onclick="
modStyle('.'+this.className,'display','none');
">Click here to make all the divs with the same style (st2) go
invisible</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>
<div class="st2">Here is another div style st2</div>
</body></html>

[...] It works in Safari and Firefox on Mac, any comments?


It now also works in IE 5.2 on Mac. :-)

There should probably be a better way of determining the selectorText,
since it may have a leading '.', '@', '#' etc. or nothing at all. So
best to explicitly pass the selectorText as a string rather than
'.' + this.className I guess.

No doubt there is a regular expression out there that will strip away
all the appropriate leading characters and leave just the class name.
--
Fred
Jul 23 '05 #6
The FAQ doesn't cover that. How do you reset a class value?

Jul 23 '05 #7
I've tried to take your advice and make this class invisible like this:

document.styleSheets[0].dropDownNav.visibility='hidden';

Is this the right way to do it?


function closeDropDownNav() {
if (document.getElementsByTagName('div')) {
var arrayOfDivs = document.getElementsByTagName('div');
var howMany = arrayOfDivs.length - 1;

for (var i=0; i < howMany; i++) {
var thisDiv = arrayOfDivs[i];
var styleClassName = thisDiv.className;
if (styleClassName == 'dropDownNav') {
thisDiv.style.visibility='hidden';
thisDiv.style.height='1px';
thisDiv.style.display='none';
}
}
} else {
if (document.styleSheets[0].dropDownNav) {
document.styleSheets[0].dropDownNav.visibility='hidden';
}
}
}

Jul 23 '05 #8
lk******@geocities.com wrote:
I've tried to take your advice and make this class invisible like this:

document.styleSheets[0].dropDownNav.visibility='hidden';

Is this the right way to do it?

[...]

No, but I think you worked that out ;-)

Look at the posts above from Rob & me. What you are trying to do is
find the style object that you want to change. You have to find it
within the stylesheets collection.

You got as far as the cssRules collection, but then there is the actual
rules which are named by "selectorText". There are two issues here:

1. The selectorText is exactly as per the rule, including any leading
characters such as '.', '@', '#'etc. whereas the className of a DOM
object has the leading '.', '@' or '#' or whatever stripped off (I'm
no expert on styles...). The selectorText for some style rules have
no prefix character (p, h1, etc.)

2. IE puts an '*' in front of the selectorText.

There is probably a clever way to do it with a regEx, but I'll save
that for you to figure out!

The following script searches through all the stylesheets and allows
for IE's asterisk, but expects you to hard code the selectorText
prefix.

Here's just the script which works in Safari, Firefox and IE on Mac:

<script type="text/javascript">

// Pass the selectorText (c), property to change (p) and new value (v)
function modStyle(c,p,v) {

// get the stylesheets
var sheets = document.styleSheets;

// Go thru each sheet looking for the right class (selectorText)
for (var i=0, sl=sheets.length; i<sl; i++) {
var rules = sheets[i].cssRules;

// Now the rules...
for (var j=0, rl=rules.length; j<rl; j++) {

// Check selectorText is same as c
// Allow for IE putting a * in front of selectorText

// Could just remove * but chose to use || instead
// var r = rules[j].selectorText.replace(/^\*/,'');

if (rules[j].selectorText == c ||
rules[j].selectorText == '*'+c ) {

// Now set the property to the value
rules[j].style[p] = v;
}
}
}
}
</script>
--
Fred
Jul 23 '05 #9
lk******@geocities.com wrote:
The FAQ doesn't cover that.
Doesn't cover what?

What it *does* cover is quoting what you are replying to though.
How do you reset a class value?


You change its properties. How you go about that depends on how you want
to do it, and how many times you are going to do it. As has been posted,
you search through the styles collection, find the class you want, and
you redefine it's properties. Personally, I wouldn't change the class
value. I would have two classes defined, with all the div's having a
common beginning to the id. Ex., myDiv1, myDiv2, myDiv3, myDiv4 and so
on. Then, I would loop through the myDiv#'s and assign it the other
className.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

23 posts views Thread by Mikko Ohtamaa | last post: by
11 posts views Thread by The Plankmeister | last post: by
5 posts views Thread by Mark Preston | last post: by
2 posts views Thread by DBLWizard | last post: by
4 posts views Thread by Fred Zilz | last post: by
117 posts views Thread by phil-news-nospam | last post: by
2 posts views Thread by Eero Tuomenoksa | last post: by
27 posts views Thread by didacticone | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.