Uli: richtige fontSize in FF per javaScript

Hallo zusammen,

ich bastle mir gerade ein kleines Greasemonkey Script das für Bilder die width und height in em Einheiten umrechnet. Dazu brauche ich die Schriftgröße des Eltern-Elements. Aber der FF gibt mir mit getComputedStyle(obj,'').fontSize nicht die original Schriftgröße, sondern die durch Strg++ veränderte (computed eben :)). Mit obj.style.fontSize bekomme ich nur dann einen Wert, wenn der auch im html gesetzt wurde.

Kann ich irgendwie die Schriftgröße ermitteln, die die Seite bei normalem Schriftgrad hat?

Besten Dank im Voraus
Uli

  1. Hallo,

    ich bastle mir gerade [...]

    Kann ich irgendwie die Schriftgröße ermitteln, die die Seite bei normalem Schriftgrad hat?

    16 Pixel.

    Grüße
    Thomas

    PS: Extras --> Einstellungen --> Inhalt --> Schrifart & Farben.

    1. Hallo Thomas,

      16 Pixel.

      ne, das meine ich doch nicht. Was ich suche ist die normale Größe des jeweiligen Elternelements eines img-Objekts. Und das per JavaScript.

      Viele Grüße
      Uli

      1. Hi,

        Was ich suche ist die normale Größe des jeweiligen Elternelements eines img-Objekts. Und das per JavaScript.

        • (unsichtbares) Test-SPAN mit Test-Buchstaben einfügen
        • Abmessungen auslesen
        • Test-SPAN wieder entfernen

        Gruß, Cybaer

        --
        Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        1. Hallo Cybaer,

          • (unsichtbares) Test-SPAN mit Test-Buchstaben einfügen
          • Abmessungen auslesen
          • Test-SPAN wieder entfernen

          Danke für die Antwort. Ich habs mal ausprobiert (ich hoffe ich habe Dich richtig verstanden).

          Ich habe mir einen Test-Span erzeugt und einen Text hinein geschrieben.
            var ts = document.createElement('span');
            var tsText = document.createTextNode("-");
            ts.appendChild(tsText);

          Dann habe ich mit insertBefore() den Span vor mein img eingefügt und den Style ausgelesen.
            objParent.insertBefore(ts, obj);
            objParentStyle = getComputedStyle(ts, '');

          Aber das Ergebnis ist das gleiche, wie wenn ich getComputedStyle() gleich auf das Parent-Element ausgeführt hätte (also je nach Schriftgrad ein unterschiedlicher fontSize Wert).

          Viele Grüße
          Uli

          1. Hallo Uli,

            Ich habe mir einen Test-Span erzeugt und einen Text hinein geschrieben.
              var ts = document.createElement('span');
              var tsText = document.createTextNode("-");
              ts.appendChild(tsText);

            Dann habe ich mit insertBefore() den Span vor mein img eingefügt und den Style ausgelesen.
              objParent.insertBefore(ts, obj);
              objParentStyle = getComputedStyle(ts, '');

            Nein, nicht den ComputedStyle auslesen: setze nichts als ein großes "M" in das generierte SPAN-Element und lies dessen offsetWidth aus! Da müsste dann der in dem entsprechenden Elementkontext vom Webautor skalierte, auf der vom Nutzer eingestellten Schriftgröße basierende Wert in Pixeln herauskommen.

            http://de.wikipedia.org/wiki/Em_(Schriftsatz)

            Gruß Gernot

            1. Hallo Gernot,

              Nein, nicht den ComputedStyle auslesen: setze nichts als ein großes "M" in das generierte SPAN-Element und lies dessen offsetWidth aus! Da müsste dann der in dem entsprechenden Elementkontext vom Webautor skalierte, auf der vom Nutzer eingestellten Schriftgröße basierende Wert in Pixeln herauskommen.

              Ja, genau der kommt raus. Aber den bekomme ich auch mit getComputedStyle(). Auch auf diese Weise komme ich nur an die fontSize die das Element nach dem Text-Zoom des Users hat. Ich brauche aber den Wert, den das Element durch Vererbung oder durch explizites Setzen im CSS oder im HTML hat. (Oder kommt man an den eingestellten Schriftgrad? Wohl eher nicht, weil das ja nichts mit HTML oder CSS zu tun hat, oder?)

              Viele Grüße
              Uli

              1. Hi,

                Auch auf diese Weise komme ich nur an die fontSize die das Element nach dem Text-Zoom des Users hat.

                Klar. Daß Du die "normale Schriftgrößen"-Einstellung suchst und nicht die tatsächliche, hatte ich überlesen. =:-/

                Und nein: Du kommst nur an die tatsächliche Größe ran.

                Im HTML-Code direkt gesetzte Stile kann man noch mit style auslesen, und an den CSS-Code kommst Du natürlich auch ran - nur dürfte es schwer werden, dort die Vererbungen auszuwerten ...

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                1. Hallo Cybaer,

                  Du kommst nur an die tatsächliche Größe ran.

                  Im HTML-Code direkt gesetzte Stile kann man noch mit style auslesen, und an den CSS-Code kommst Du natürlich auch ran - nur dürfte es schwer werden, dort die Vererbungen auszuwerten ...

                  Aber igrendwie muss das doch gehen. Firebug kann das doch auch. Wenn ich in Firebug auf html klicke und mich dann zu einem Bild durchhangle, dann steht rechts daneben das zugehörige css. Ererbte aber überschriebene Eigenschaften sind dann sogar durchgestrichen.

                  Irgendwie müssen die das doch machen. Oder machen die das "zu Fuß"? Den Firebug-Code hab ich mir mal angeschaut, aber ehrlich gesagt steig ich da nicht durch...

                  Viele Grüße
                  Uli

                  1. Hi,

                    Aber igrendwie muss das doch gehen. Firebug kann das doch auch. Wenn ich in Firebug auf html klicke und mich dann zu einem Bild durchhangle, dann steht rechts daneben das zugehörige css.

                    An das CSS kommst Du prinzipiell ran: cssRule()
                    Aber vermutlich macht Firebug den Rest zu Fuß (umgekehrtes Beispiel: cssQuery() ermittelt zu jedem CSS-Selektor die passenden HTML-Elemente)

                    Aber selbst wenn Du dir was bastelst: An den realen Ursprungswert kannst Du trotzdem *nicht* rankommen - immer *nur* an den aktuell gültigen! Weder kannst Du feststellen, ob der User sporadisch eine andere Schriftgröße (via Schriftgrad-Menü) eingestellt hat, noch, welche Schriftgröße er generell (in den Browsereinstellungen) angegeben hat (s. Thomas J.S. Beitrag).

                    Gruß, Cybaer

                    --
                    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                    1. Hallo Cybaer,

                      An das CSS kommst Du prinzipiell ran: cssRule() [...] (umgekehrtes Beispiel: cssQuery() ermittelt zu jedem CSS-Selektor die passenden HTML-Elemente)

                      Das ist eine Gute Idee, das CSS zu verändern. Danke für den Denkanstoß und die Links.

                      Aber selbst wenn Du dir was bastelst: An den realen Ursprungswert kannst Du trotzdem *nicht* rankommen - immer *nur* an den aktuell gültigen!

                      Schade :-(.

                      Weder kannst Du feststellen, ob der User sporadisch eine andere Schriftgröße (via Schriftgrad-Menü) eingestellt hat, noch, welche Schriftgröße er generell (in den Browsereinstellungen) angegeben hat (s. Thomas J.S. Beitrag).

                      Das wäre ohnehin nur meine zweite Wahl gewesen :-).

                      Viele Grüße
                      Uli