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

L

lkrubner

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()?????
 
L

lkrubner

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;
var styleClassName = thisDiv.className.value;
if (styleClassName == 'dropDownNav') {
thisDiv.style.visibility='hidden';
thisDiv.style.height='1px';
thisDiv.style.display='none';
}
}
}
 
I

Ivo

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;
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
 
R

Randy Webb

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?
 
R

RobG

Randy said:
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.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?
 
F

Fred Oz

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.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.
 
L

lkrubner

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;
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';
}
}
}
 
F

Fred Oz

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.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>
 
R

Randy Webb

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top