Style mehrerer Divs der gleichen Klasse ändern

[Jo]

Hallo,

ich habe eine Seite mit einigen Div-Containern, welche gleiche Klassen (class="divcon") und dasselbe Elternelement haben.
Zunächst sind alle sind Div-Container mit der Klasse "divcon" nicht sichtbar (visibility="hidden").
Bei onClick auf einen Textlink wird der "angesprochene" Div-Container via JavaScript sichtbar:

<script type="text/javascript">
 function vis(a) {
 document.getElementById(a).style.visibility="visible";
 }
</script>

Soweit i. O. Nun will ich aber zusätzlich, dass alle anderen Div-Container derselben Klasse unsichtbar werden und nur der "angesprochene" erscheint.
Leider hatte ich mit einem ähnlichen JavScript wie dem obigen, nur mit document.getElementByClassName("divcon") keinen Erfolg...

Wäre für Angaben einer Lösung sehr dankbar!

MfG

[Ashura]

Hallo Jo.

Leider hatte ich mit einem ähnlichen JavScript wie dem obigen, nur mit document.getElementByClassName("divcon") keinen Erfolg...

Eine solche Methode gibt es im DOM ja auch nicht.
Du kannst dir aber eine solche Methode schreiben bzw. eine geschriebene verwenden.

Einen schönen Sonntag noch.

Gruß, Ashura

[Jo]

Hallo Jo.
Eine solche Methode gibt es im DOM ja auch nicht.
Du kannst dir aber eine solche Methode schreiben bzw. eine geschriebene verwenden.

Einen schönen Sonntag noch.

Gruß, Ashura

»»

Hallo,

besten Dank!

MfG

[Jeena Paradies]

Hallo,

Du kannst dir aber eine solche Methode schreiben bzw. eine geschriebene verwenden.

Noch netter (allgemeingültiger) ist Robert Nymans Methode:

function getElementsByClassName(oElm, strTagName, oClassNames){  
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);  
    var arrReturnElements = new Array();  
    var arrRegExpClassNames = new Array();  
    if(typeof oClassNames == "object"){  
        for(var i=0; i<oClassNames.length; i++){  
            arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));  
        }  
    }  
    else{  
        arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));  
    }  
    var oElement;  
    var bMatchesAll;  
    for(var j=0; j<arrElements.length; j++){  
        oElement = arrElements[j];  
        bMatchesAll = true;  
        for(var k=0; k<arrRegExpClassNames.length; k++){  
            if(!arrRegExpClassNames[k].test(oElement.className)){  
                bMatchesAll = false;  
                break;  
            }  
        }  
        if(bMatchesAll){  
            arrReturnElements.push(oElement);  
        }  
    }  
    return (arrReturnElements)  
}

Damit kann man dann zum Beispiel alle links mit der klasse myclass holen:

getElementsByClassName(document, "a", "myclass");

Oder natürlich auch alle Elemente mit der Klasse myclass:

getElementsByClassName(document, "*", "myclass");

Oder sogar Alle divs innerhalb des Elements mit der ID "container", mit einer klasse "col" und einer "left":

getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

Was vielleicht noch wünschenswert wäre, wäre so etwas wie man im CSS mittels: div#container.col.left macht, also dass das div mit der ID container auch noch gleichzeigtig beide Klassen haben muss, aber naja das vielleicht für die Zukunft ;-).

Grüße
Jeena Paradies

[Ashura]

Hallo Jeena.

Noch netter (allgemeingültiger) ist Robert Nymans Methode:

Ja, sieht nicht schlecht aus.

Könnte man HTMLElement browserübergreifend per prototype erweitern, könnte man sich sogar den ersten Parameter sparen.
Könnte …

document.getElementById("container").getElementsByClassName('foo');

Wäre angenehmer, nicht?

Einen schönen Montag noch.

Gruß, Ashura

[Cybaer]

Hi,

Leider hatte ich mit einem ähnlichen JavScript wie dem obigen, nur mit document.getElementByClassName("divcon") keinen Erfolg...

Sinnvollerweise geht man dann nicht alle Elemente dieser Klasse durch, sondern man ändert einmalig direkt den Style der Klasse!

Coding: CSS-Regeln auslesen & ändern

Gruß, Cybaer