Aline: Änderung einer Eigenschaft in einer CSS-Klasse

SELF-Forum

Änderung einer Eigenschaft in einer CSS-Klasse

Aline
– Informationen zu den Bewertungsregeln

Hi!

wie kann ich eine Eigenschaft in einer CSS-Klasse ändern? Ich möchte in folgenden Beispiel bei der CSS-Klasse test display auf block ändern.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<title>Test</title>  
<style type="text/css"><!--  
/* <![CDATA[ */  
.test{  
  display: none;  
}  
/* ]]> */  
--></style>  
<body>  
...  
</body>  
</html>

Aline

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Änderung einer Eigenschaft in einer CSS-Klasse

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Aline:

    nuqneH

    wie kann ich eine Eigenschaft in einer CSS-Klasse ändern? Ich möchte in folgenden Beispiel bei der CSS-Klasse test display auf block ändern.

    Wahrscheinlich möchtest du das nicht, sondern du möchtest alle (es sind doch mehrere, oder?) Elemente der Klasse "test" dynamisch ausblenden.

    Das geht ganz einfach, indem du dynamisch die Klasse eines Vorfahrenelements ('body' bietet sich an) änderst:

    document.body.className += " no-test";

    und im Stylesheet zu stehen hast:

    .no-test .test { display: none }

    Und wenn einer kommt und dir irgedwas auf Coding.binon.net verlinkt, ignorier ihn. >;->

    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">

    BTW, @dir="ltr" ist Default, die Angabe also nicht nötig.

    <style type="text/css"><!--
    /* <![CDATA[ */

    Die HTML-Auskommentierung von CSS-Code ist auch völlig unnötig; das Markieren von CSS-Code als CDATA meist auch.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Änderung einer Eigenschaft in einer CSS-Klasse

      Aline
      – Informationen zu den Bewertungsregeln

      Hi!

      wie kann ich eine Eigenschaft in einer CSS-Klasse ändern? Ich möchte in folgenden Beispiel bei der CSS-Klasse test display auf block ändern.

      Wahrscheinlich möchtest du das nicht, sondern du möchtest alle (es sind doch mehrere, oder?) Elemente der Klasse "test" dynamisch ausblenden.

      Das geht ganz einfach, indem du dynamisch die Klasse eines Vorfahrenelements ('body' bietet sich an) änderst:

      document.body.className += " no-test";

      und im Stylesheet zu stehen hast:

      .no-test .test { display: none }

      ja die Klasse kommt öfters vor

      was muss ich unternehmen, wenn ich zwischen block und none hin+her wechseln möchte?

      Das ganze soll mit einer Dropdownbox verbunden werden. Je nachdem was ausgewählt wurde, soll die eine Klasse display: none; und bei der anderen display: block;

      ich hab 2 Klasse

      .beispiel1{
        display: none;
      }
      .beispiel2{
        display: block;
      }

      ich möchte dann bei der Klasse beispiel1 display: block und bei der Klasse beispiel2 display: none

      Aline

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Änderung einer Eigenschaft in einer CSS-Klasse

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Aline:

        nuqneH

        was muss ich unternehmen, wenn ich zwischen block und none hin+her wechseln möchte?

        Die entsprechende Klasse des 'body'-Elements wieder entfernen.

        Wenn 'body' außer diser keine weiteren Klassen angehört, dann geht das einfach mit

        document.body.className = "";

        Aber das löscht alle Klassen. Soll nur eine bestimmte aus mehreren gelöscht werden, muss man etwas Gehirnschmalz investieren oder ein Framework verwenden, das eine Methode removeClass mit sich bringt.

        Das ganze soll mit einer Dropdownbox verbunden werden. Je nachdem was ausgewählt wurde

        Da könnte eine Klasse "auswahl1" bzw. "auswahl2" für das Vorfahrenelement vergeben werden.

        soll die eine Klasse display: none; und bei der anderen display: block; […]
        ich möchte dann bei der Klasse beispiel1 display: block und bei der Klasse beispiel2 display: none

        .auswahl1 .beispiel1 { display: block }  
.auswahl1 .beispiel2 { display: none }  
  
.auswahl2 .beispiel1 { display: none }  
.auswahl2 .beispiel2 { display: block }

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Änderung einer Eigenschaft in einer CSS-Klasse

          Aline
          – Informationen zu den Bewertungsregeln

          Hi!

          ich habe es mit getElementByClassName realisiert.

          elemente1 = getElementByClassName("class1");
          elemente2 = getElementByClassName("class2");

          die CSS-Eigenschaften habe ich dann wie folgt geändert
          for(var i = 0; i < elemente1.length; i++){
            elemente1[i].style.display = "...";
          }

          Aline

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Änderung einer Eigenschaft in einer CSS-Klasse

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Aline:

            nuqneH

            ich habe es mit getElementByClassName realisiert.

            Schade.

            Den ganzen Elementbaum zu durchsuchen und dann die gefundenen Elemente in einer Schleife abzuarbeiten ist vermutlich deutlich langsamer als die Methode, die ich dir genannt hatte.

            Qapla'

            --
            Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Änderung einer Eigenschaft in einer CSS-Klasse

              Aline
              – Informationen zu den Bewertungsregeln

              Hi!

              ich habe es mit getElementByClassName realisiert.

              Schade.

              Den ganzen Elementbaum zu durchsuchen und dann die gefundenen Elemente in einer Schleife abzuarbeiten ist vermutlich deutlich langsamer als die Methode, die ich dir genannt hatte.

              ich verwende mehr Klassen als diese 2.

              ich hatte auch nicht ganz verstanden, wie das mit den ständigen hin+her wechseln funktionieren sollte, wenn ich in der Dropdownbox zwischen den 2 Optionen hin+her wechsel.

              Aline

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Änderung einer Eigenschaft in einer CSS-Klasse

                nemoinho Homepage des Autors
                – Informationen zu den Bewertungsregeln

                ich hatte auch nicht ganz verstanden, wie das mit den ständigen hin+her wechseln funktionieren sollte, wenn ich in der Dropdownbox zwischen den 2 Optionen hin+her wechsel.

                Gunnar meinte du solltest das ganze etwa so realisieren:
                CSS:

                  
.test {  
    display: none;  
}  
.no-test .test {  
    display: block;  
}

                Javascript:

                  
function toggle(){  
    var clName = document.body.className;  
    clName = clName.indexOf('no-test') == -1 ? clName+' no-test' : clName.strReplace(' no-test', '');  
}

                Jedesmal wenn du den Zustand ändern wilst rufst du die funktion toggle() auf.

                mfG Felix Nehrke

                P.S.: Besuche unseren Blog:  http://www.pommes-blog.de

                --
                Manchmal gibs was neues :)
                fo:| ch:| rl:( br:> n4:? ie:( va:) de:> zu:) fl:( ss:| ls:[ js:)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

  2. Änderung einer Eigenschaft in einer CSS-Klasse

    Cybaer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    wie kann ich eine Eigenschaft in einer CSS-Klasse ändern? Ich möchte in folgenden Beispiel bei der CSS-Klasse test display auf block ändern.

    cssRule(".test","display","block");

    Gruß, Cybaer

    --
    Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
    (Joseph Joubert, Schriftsteller)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Änderung einer Eigenschaft in einer CSS-Klasse

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Cybaer:

      nuqneH

      Enttarnt: http://Coding.binon.net/cssRule

      Na, da isser ja.

      Deine Penetranz ist wirklich bemerkenswert.

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Änderung einer Eigenschaft in einer CSS-Klasse

        Cybaer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Enttarnt: http://Coding.binon.net/cssRule

        Gratuliere - große Leistung. :)

        Deine Penetranz ist wirklich bemerkenswert.

        Was bei Dir bemerkenswert ist, darüber bietet vorerst wieder die Höflichkeit zu schweigen ... :)

        Gruß, Cybaer

        --
        Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
        (Joseph Joubert, Schriftsteller)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln