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

Discussion in 'Javascript' started by lkrubner, Dec 28, 2004.

  1. lkrubner

    lkrubner Guest

    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()?????
     
    lkrubner, Dec 28, 2004
    #1
    1. Advertisements

  2. lkrubner

    lkrubner Guest

    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';
    }
    }
    }
     
    lkrubner, Dec 28, 2004
    #2
    1. Advertisements

  3. lkrubner

    Ivo Guest

    Why -1? Don't you want the last div?


    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') {
    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, Dec 28, 2004
    #3
  4. lkrubner

    Randy Webb Guest

    Then why not just set the visibility of that class to hidden?
     
    Randy Webb, Dec 28, 2004
    #4
  5. lkrubner

    RobG Guest

    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?
     
    RobG, Dec 29, 2004
    #5
  6. lkrubner

    Fred Oz Guest

    RobG wrote:
    [...]
    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 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 Oz, Dec 29, 2004
    #6
  7. lkrubner

    lkrubner Guest

    The FAQ doesn't cover that. How do you reset a class value?
     
    lkrubner, Dec 30, 2004
    #7
  8. lkrubner

    lkrubner Guest

    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';
    }
    }
    }
     
    lkrubner, Dec 30, 2004
    #8
  9. lkrubner

    Fred Oz Guest

    [...]

    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>
     
    Fred Oz, Dec 30, 2004
    #9
  10. lkrubner

    Randy Webb Guest

    Doesn't cover what?

    What it *does* cover is quoting what you are replying to though.
    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 Webb, Dec 30, 2004
    #10
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.