JürgenB: CSS kopieren

Hallo,

ich möchte alle css-Eigenschaften eines Elements auf ein anderes übertragen. Gibt es da einen einfachen Weg? ich habe bisher nur den Weg gefunden, über getComputedStyle alles einzeln zu übertragen.

Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um. Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

Gruß
Jürgen

akzeptierte Antworten

  1. Hallo

    ich möchte alle css-Eigenschaften eines Elements auf ein anderes übertragen. Gibt es da einen einfachen Weg?

    Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um. Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

    Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

    Tschö, Auge

    --
    Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
    Wolfgang Schneidewind *prust*
    1. Hallo Auge,

      Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

      danke für den Tipp. Die Benutzer des Scriptes wissen aber nichts von einem nachträglich per JS eingefügten Button. Oft wird auch das Default-CSS verwendet.

      Gruß
      Jürgen

      1. Hallo

        Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

        danke für den Tipp. Die Benutzer des Scriptes wissen aber nichts von einem nachträglich per JS eingefügten Button. Oft wird auch das Default-CSS verwendet.

        Benutzen diese Clients nicht das Default-CSS und hast du dieses nicht unter deiner Kontrolle?

        Tschö, Auge

        --
        Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
        Wolfgang Schneidewind *prust*
        1. Hallo,

          Benutzen diese Clients nicht das Default-CSS und hast du dieses nicht unter deiner Kontrolle?

          ich habe überhaupt keine Kontrolle über die Seite. Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

          Gruß
          Jürgen

          1. @@JürgenB

            ich habe überhaupt keine Kontrolle über die Seite. Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

            Zwei Möglichkeiten:

            • Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

            oder:

            LLAP 🖖

            --
            “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. Hallo Gunnar,

              Zwei Möglichkeiten:

              • Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

              das gibt es hier nicht.

              oder:

              in einem anderen Script mache ich das schon so, aber es ist doch recht aufwändig, da man ja alles doppelt machen muss. Daher meine Suche nach so etwas wie a.css = b.css.

              Gruß
              Jürgen

              1. @@JürgenB

                • Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

                das gibt es hier nicht.

                Das liegt doch an dir.

                in einem anderen Script mache ich das schon so, aber es ist doch recht aufwändig, da man ja alles doppelt machen muss.

                Wieso doppelt? Wieso aufwändig?

                Aber nochmal nachgedacht: Anstatt dich in ein Stylesheet einzuhängen erzeugst du einfach ein neues style-Element:

                var sortierbarStyle = document.createElement('style');
                sortierbarStyle.innerText = '.sortierbar > thead th > button { border: none; background-color: transparent; font: inherit; padding: 0 } .sortierbar > thead th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
                document.head.appendChild(sortierbarStyle);
                

                Die Selektoren hab ich so spezifisch gemacht, damit sie womöglich andere in der Tabelle vorkommende Buttons nicht anfassen. Es ist aber vielleicht besser, deinen buttons etwas mitzugeben (Klasse?), was sie eindeutig selektierbar macht.

                Daher meine Suche nach so etwas wie a.css = b.css.

                for each (property in window.getComputedStyle(document.querySelector('.sortierbar > thead th')))
                {}
                

                Das willst du nicht wirklich.

                LLAP 🖖

                --
                “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
                1. Hallo Gunnar,

                  • Der Nutzer muss zusätzlich zu dem Script auch das zur Bibliothek gehörige Stylesheet einbinden

                  das gibt es hier nicht.

                  Das liegt doch an dir.

                  ja, und ich bin ein Freund von Scripten, die einfach zu nutzen sind.

                  Wieso doppelt? Wieso aufwändig?

                  wegen insertRule und addRule

                  Aber nochmal nachgedacht: Anstatt dich in ein Stylesheet einzuhängen erzeugst du einfach ein neues style-Element:

                  var sortierbarStyle = document.createElement('style');
                  sortierbarStyle.innerText = '.sortierbar > thead th > button { border: none; background-color: transparent; font: inherit; padding: 0 } .sortierbar > thead th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }';
                  document.head.appendChild(sortierbarStyle);
                  

                  gute Idee, an innerText habe ich jetzt garnicht gedacht.

                  Daher meine Suche nach so etwas wie a.css = b.css.

                  for each (property in window.getComputedStyle(document.querySelector('.sortierbar > thead th')))
                  {}
                  

                  Das willst du nicht wirklich.

                  ganz bestimmt nicht! Aber genau so etwas habe ich als erstes gefunden.

                  Gruß
                  Jürgen

          2. @@JürgenB

            Der Benutzer meines Scriptes bindet dieses ein und setzt ein class-Attribut. Das war's.

            Du willst das Ding überarbeiten? Mit dem Ziel, dass „Beachten Sie, dass dieser Sortierer nicht barrierefrei ist“ dann raus kann? Gut so. Andernfalls wäre an der Stelle „… und deshalb wertlos ist“ zu ergänzen.

            Sortierbare Tabellen sind/waren in HTML bereits vorgesehen: per booleschem Attribut sortable fürs table-Element und sorted für die Kopfzelle der entsprechenden Spalte. Im aktuellen Draft von HTML 5.1 ist das allerdings nicht mehr enthalten. Aber vielleicht kommt es in einer späteren Version.

            Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

            Oder als Web Component. Ich hab das mal gemacht:

            Siehe auch den Vortrag dazu ab Folie 67

            LLAP 🖖

            --
            “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. Hallo Gunnar,

              Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

              das ist beim Wiki-Sortieret sicher möglich, bei meinem kann ich das aus Kompatibilitätsgründen nur zusätzlich anbieten.

              Oder als Web Component. Ich hab das mal gemacht:

              ein interessanter Ansatz. Die Custom Elements habe ich mir für ein anderes Script schon mal angesehen. Aber sowohl ich als auch diverse Browser benötigen da noch diverse Updates.

              Gruß
              Jürgen

            2. Hallo Gunnar Bittersmann,

              Sortierbare Tabellen sind/waren in HTML bereits vorgesehen: per booleschem Attribut

              Da ist es vielleicht sinnvoll, das Ding […] für <table sortable> [zu schreiben]

              „Ich sehe immer noch Vorteile darin, polyglottes HTML (also XML-Syntax) zu schreiben. Also Attribute (auch boolesche) immer mit Wert.“ (Gunnar Bittersmann)

              SCNR 🖖
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
              1. @@Matthias Apsel

                „Ich sehe immer noch Vorteile darin, polyglottes HTML (also XML-Syntax) zu schreiben. Also Attribute (auch boolesche) immer mit Wert.“ (Gunnar Bittersmann)

                „Was kümmert mich mein Geschwätz von gestern?“ (Konrad Adenauer)

                LLAP 🖖

                --
                “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            3. Hallo Gunnar,

              Da ist es vielleicht sinnvoll, das Ding als Polyfill dafür zu schreiben, also nicht für <table class="sortierbar">, sondern für <table sortable>

              leider wird dadurch die Seite dann invalide. Mir ist klar, dass dieser Fehler keine Probleme bereitet, aber sollte man invalide Seiten im Wiki als Beispiel anbieten?

              Gruß
              Jürgen

    2. @@Auge

      Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

      Nö. Üblicherweise wird man für th bspw. keine Schriftart/-größe explizit angeben; sondern diese erben lassen.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. Hallo

        @@Auge

        Der kürzeste Weg dürfte sein, die Definitionen für th auch für Buttons in th gelten zu lassen (th, th button {}).

        Nö. Üblicherweise wird man für th bspw. keine Schriftart/-größe explizit angeben; sondern diese erben lassen.

        Das ist hier unerheblich.

        Wenn Jürgen im Eröffnungsposting sagt …

        Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

        … gehe ich davon aus, dass er für th eben doch Eigenschaften definiert hat. Auch wenn nicht, erben ja nicht nur die th, sondern auch die button von ihren Elternelementen. Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

        Tschö, Auge

        --
        Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
        Wolfgang Schneidewind *prust*
        1. Hallo Auge,

          … Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

          und um die (etc. pp.) geht es mir.

          Gruß
          Jürgen

          1. Hallo

            … Ausgenommen davon sind natürlich jene, die nur für sie selbst gelten (border, etc. pp.).

            und um die (etc. pp.) geht es mir.

            Naja, aber genau die übernimmst du ja nicht von anderen Elementen, sondern sie sind (typischerweise) Teil des Browser-CSS, die du deaktivieren musst/willst. Da scheint mir Gunnars Weg am erfolgversprechendsten, da button in anderen Kontexten unbeeinflusst bleiben.

            Tschö, Auge

            --
            Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
            Wolfgang Schneidewind *prust*
  2. @@JürgenB

    Zum Hintergrund: Ich möchte ein Element (th) klickbar machen. Dazu erzeuge ich im th einen button und kopiere den Inhalt über innerHTML um.

    Statt die css-Eigenschaften einzeln zu setzen und dabei einige zu vergessen, möchte ich alle css-Eigenschaften vom th auf den button übertragen.

    ?? Wozu?

    Was genau stört dich an der Formatierung des Buttons?

    Der Rahmen? Weg damit:
    th > button { border: none }

    Die Hintergrundfarbe? Weg damit:
    th > button { background-color: transparent }

    Die Schrift? Vom Elternelement vererben:
    th > button { font: inherit }

    Das Padding? Weg damit:
    th > button { padding: 0 }

    Für Firefox außerdem:
    th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

    Noch was?

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. Hallo Gunnar,

      Was genau stört dich an der Formatierung des Buttons?

      Der Rahmen? Weg damit:
      th > button { border: none }

      Die Hintergrundfarbe? Weg damit:
      th > button { background-color: transparent }

      Die Schrift? Vom Elternelement vererben:
      th > button { font: inherit }

      Das Padding? Weg damit:
      th > button { padding: 0 }

      ich habe auch noch ein
      th > button { color: inherit }
      eingefügt. Und mit
      th > button { width: 100%; height: 100% }
      wird die klickbare Fläche so groß wie das th.

      Für Firefox außerdem:
      th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

      das habe ich in th > button::-moz-focus-inner { border-width: 0; padding: 0; } geändert.

      Gruß
      Jürgen

      1. @@JürgenB

        Für Firefox außerdem:
        th > button::-moz-focus-inner { margin: -1px; border-width: 1px; padding: 0; }

        das habe ich in th > button::-moz-focus-inner { border-width: 0; padding: 0; } geändert.

        Der Sinn des 1px breiten Rahmens ist, dass bei :focus die gestrichelte Linie ringsrum noch zu erkennen ist.

        Wenn du den :focus-Status anderweitig kenntlich machst, go ahead. Aber denk dran, ihn irgendwie kenntlichzumachen.

        LLAP 🖖

        --
        “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. Hallo Gunnar,

          Der Sinn des 1px breiten Rahmens ist, dass bei :focus die gestrichelte Linie ringsrum noch zu erkennen ist.

          das war mir garnicht aufgefallen. Danke für deine Hilfe.

          Gruß
          Jürgen