CSS Wert im Firefox per Javascript setzen

[Tolwin]

Hallo Forum,

kann mir jemand sagen, wie ich im Firefox per Javascript einen CSS Wert setzen kann ... auslesen klappt ja schon =)
Um den Text auf einer Seite per Button skalieren zu könne, habe ich folgendes Skript im Einsatz.

function fontGroesse(direction) {
 var schriftgrad="";
 var el = "";
 if(window.getComputedStyle) {
      schriftgrad = window.getComputedStyle(document.getElementById("content"),"" ).getPropertyValue("font-size");
 } else if(document.getElementById("content").currentStyle) {
   schriftgrad = document.getElementById("content").currentStyle.fontSize;
 }
 var size=schriftgrad.split("em");
 switch (direction) {
     case "+":
     fontsize_new = parseFloat(size[0]) * 1.1;
     break;
 default:
     if (parseFloat(size[0]) > 0.5) fontsize_new = parseFloat(size[0]) * 0.9;
     break;
 }
 document.getElementById("content").style.fontSize=fontsize_new + "em";
}

Mit der letzten Zeile setze ich die neue fontSize im IE.
Leider konnte ich per Google und suche in div. Foren nichts
dazu finden.

Hätte hier jemand eine Tipp für mich?

Vielen Dank und Gruß
Tolwin

[MudGuard]

Hi,

if(window.getComputedStyle) {
      schriftgrad = window.getComputedStyle(document.getElementById("content"),"" ).getPropertyValue("font-size");
} else if(document.getElementById("content").currentStyle) {
   schriftgrad = document.getElementById("content").currentStyle.fontSize;
}
var size=schriftgrad.split("em");

Ich vermute den Fehler an dieser Stelle.
Laß Dir doch mal schriftgrad ausgeben. Ist das wirklich in em angegeben?
Ich vermute eher, daß das in px zurückkommt - es heißt ja computedStyle, nicht givenStyle, und gerade bei em muß ja immer noch mit der Schriftgröße des Elternelements multipliziert, also gerechnet (computed) werden, um auf die reale Schriftgröße zu kommen.

Damit erzeugt der split ein anderes Ergebnis (da er dann nicht splittet).

fontsize_new = parseFloat(size[0]) * 1.1;

Das könnte dann hier ein Problem geben.

document.getElementById("content").style.fontSize=fontsize_new + "em";

Wenn fontsize_new einen vernünftigen Wert enthält, müßte das funktionieren.

Was sagt denn die Fehlerkonsole des Firefox?

cu,
Andreas

[Kai345]

Grütze .. äh ... Grüße!

var size=schriftgrad.split("em");

Ich vermute den Fehler an dieser Stelle.
Laß Dir doch mal schriftgrad ausgeben. Ist das wirklich in em angegeben?
Ich vermute eher, daß das in px zurückkommt - es heißt ja computedStyle, nicht givenStyle, und gerade bei em muß ja immer noch mit der Schriftgröße des Elternelements multipliziert, also gerechnet (computed) werden, um auf die reale Schriftgröße zu kommen.

Die Idee mit split ist ohnehin nicht toll, da leistet parseInt auch mehr, weil es auf jeden Fall nur den Zahlenanteil zurückgibt.

Ich würde Tolwin aus diesem Grund dazu raten, die Angabe einfach in Prozent zu machen, dann entfällt der ganze Umrechnungsteil. So etwas habe ich bei mir auch gerade eingebaut ;-)

Cü
Kai

[Tolwin]

Hi Andreas,

var size=schriftgrad.split("em");

alert(size) gibt mir im Firefox 10.8667px aus, im IE sind es 0,68
Mir ist aber nicht klar, woher der Firefox die px Angabe bekommt.
In der ausgelagerten CSS Datei habe ich im body font-size:0,68em
angegeben.
Der restliche Text im body skaliert prozentural zur Standard-Schriftgröße.

Hast Du eine Idee?

Grüße
Tolwin

[Tolwin]

Ach übrigens, die Fehlerkonsole der FF wirft keinen Error.

Tolwin

[Tolwin]

tststs ... jetzt beantworte ich schon meine Fragen selbst =)
Habe das Problem jetzt wie folgt gelöst

function fontGroesse(direction) {
 var schriftgrad="";
 if(window.getComputedStyle) {
      schriftgrad = window.getComputedStyle(document.getElementById("content"),"" ).getPropertyValue("font-size");
      var size=schriftgrad.split("px");
      size = parseFloat(size);
      size = Math.round(size);
      size = size / 16;
  } else if(document.getElementById("content").currentStyle) {
   schriftgrad = document.getElementById("content").currentStyle.fontSize;
   var size=schriftgrad.split("em");
 }
 switch (direction) {
     case "+":
     fontsize_new = parseFloat(size) * 1.1;
     break;
 default:
     if (parseFloat(size[0]) > 0.5) fontsize_new = parseFloat(size[0]) * 0.9;
     break;
 }

document.getElementById("content").style.fontSize=fontsize_new + "em";
}

Allerdings weiss ich nicht, woher der Pixelwert im Firefox kommt.
Ist nun aber auch egal. Jetzt besteht aber noch ein weiteres Problem.
Der IE skaliert den um den Text liegenden DIV Tag entsprechend der
font-size, der Firefox schreibt den Text über den DIV hinaus ...
Gibt es hier noch eine Möglichkeit dies zu verhindern?

Tolwin

[plan_B]

Hallo,

var size=schriftgrad.split("px");
      size = parseFloat(size);

.... split() liefert ein Array, wie dann parseFloat() etwas Vernünfitges liefern soll ist mir schleierhaft ...

Gruß plan_B

[Tolwin]

Also es klappt definitiv. Sowohl im IE als auf Firefox.
Nur halt mit dem Problem, dass der IE den DIV Tag skaliert
(feste Breit und px und variable Höhe in %) und der FF den
Text über den Rand hinaus schreibt. Vergrößern und verkleinern geht.
Grüße
Tolwin

[Struppi]

Hallo,

var size=schriftgrad.split("px");
      size = parseFloat(size);

.... split() liefert ein Array, wie dann parseFloat() etwas Vernünfitges liefern soll ist mir schleierhaft ...

"Er" macht vermutlich einen Join.
aber m Prinzip reicht hier wirklich:
var size= parseFloat(schriftgrad);

Struppi.

[plan_B]

Hallo,

var size=schriftgrad.split("px");
      size = parseFloat(size);

.... split() liefert ein Array, wie dann parseFloat() etwas Vernünfitges liefern soll ist mir schleierhaft ...

"Er" macht vermutlich einen Join.

alert([5.4,30]+"\n"+parseFloat([5.4,30]));

ja , sieht so aus

Gruß plan_B

[MudGuard]

Hi,

Ist nun aber auch egal. Jetzt besteht aber noch ein weiteres Problem.
Der IE skaliert den um den Text liegenden DIV Tag entsprechend der
font-size, der Firefox schreibt den Text über den DIV hinaus ...

Dieses IE-Problem ist doch bekannt. Der versteht height falsch und interpretiert es so wie min-height interpretiert werden müßte (welches der IE nicht kennt).

Gibt es hier noch eine Möglichkeit dies zu verhindern?

Höhe auf auto setzen (bzw. belassen), overflow geeignet setzen ...

cu,
Andreas

[Tolwin]

Hallo Andreas,

ich habe den DIV wie folgt definiert:

.C_content_div {
background-color:#FFFFFF;
width:607px;
height:auto;
min-height:auto;
background-color:#FFFFFF;
border-left: 2px solid #FF9900;
border-top: 2px solid #FF9900;
border-right: 1px solid #C1C1C1;
border-bottom: 1px solid #C1C1C1;
padding:0px 10px 0px 10px;
overflow:auto;}

Die Textvergrößerung bezieht sich global auf den <body>
Trotz der oben vorgenommenen Anpassungen, verschwindet der Text
entweder im Nichts (hidden) oder geht über den DIV Rahmen drüber.
Auch overflow-y will da nicht funktionieren.
Kann ich keine dynamischen DIV`s im Firefox realisieren?

Grüße
Tolwin

[MudGuard]

Hi,

min-height:auto;

m.W. nicht erlaubt. min-height muß einen festen Wert haben (oder inherit) (w3c.org ist momentan nicht erreichbar, kann also nicht nachgucken)

width:607px;
height:auto;
overflow:auto;}

Damit kann es m.E. nur in x-Richtung zu einem Scrollbalken kommen. Denn der kommt ja nur, wenn in der jeweiligen Richtung der Inhalt nicht ins Element paßt. In y-Richtung sagst Du aber, daß sich das Element dem Inhalt anpassen soll.

Trotz der oben vorgenommenen Anpassungen, verschwindet der Text
entweder im Nichts (hidden) oder geht über den DIV Rahmen drüber.

Wirken noch irgendwelche anderen Rulesets auf Dein Div?

Kann ich keine dynamischen DIV`s im Firefox realisieren?

Ob Du das kannst, weiß ich nicht. Möglich ist es.

Da Du die Seite aber nicht zeigst, kann keiner hier ermitteln, wo das Problem bei Deiner Seite besteht.

cu,
Andreas

[Tolwin]

Da Du die Seite aber nicht zeigst, kann keiner hier ermitteln, wo das Problem bei Deiner Seite besteht.

Ich kann die Seite leider nicht zeigen,
da sie sich in einem Intranet befindet und ich keinen öffentlichen Auftritt habe, mit
dem ich die Seite zur Verfügung stellen kann.

Es wirkt keine andere Definition im CSS File auf den DIV, habe es
eben gestestet und alles andere rausgeschmissen.

Die Höhe habe ich nun wie empfohlen angepasst
.C_content_div {
background-color:#FFFFFF;
width:607px;
min-height:inherit;
background-color:#FFFFFF;
border-left: 2px solid #FF9900;
border-top: 2px solid #FF9900;
border-right: 1px solid #C1C1C1;
border-bottom: 1px solid #C1C1C1;
padding:0px 10px 0px 10px;
overflow-y:inherit;}

Hatte min-height auch schon auf 100% stehen.

Ich google jetzt schon seit 3 Tagen um dieses Problem zu lösen, aber
alle Ansätze waren leider Erfolglos.
Irgendwie bekommt der Firefox von den Anpassungen der font-size nichts mit
und rendert die Seite nicht nach.

Ich bin ratlos...

Tolwin

PS. erst mal vielen Dank für die bisherige Unterstützung

[MudGuard]

Hi,

Ich kann die Seite leider nicht zeigen,

Dann kann ich Dir leider nicht mehr weiter helfen.

Nur noch eine Idee:

wie verhält sich Firefox, wenn man ohne das Javascript ganz normal die Schriftgröße ändert?
Also per Ctrl+, Ctrl-, CtrlMausrad?

cu,
Andreas

[Tolwin]

Guten Morgen,

wie verhält sich Firefox, wenn man ohne das Javascript ganz normal die Schriftgröße ändert?
Also per Ctrl+, Ctrl-, CtrlMausrad?

Da skaliert dann der DIV mit, also genau so wie ich es gerne hätte!
Kann man diese Funktion auch mit einem Button im Content abbilden?

Gruß
Tolwin

[MudGuard]

Hi,

Mir ist aber nicht klar, woher der Firefox die px Angabe bekommt.

Schrieb ich doch. Er berechnet sie. Daher ja auch computedStyle (computed = berechnet).

cu,
Andreas

[plan_B]

Hallo,

... bedenke, dass du hier keine CSS-Notation verwenden solltest, du schreibst hier javascript.

hier würde es sich auch gut machen, dir eine allgemeine Funktion

function get_comp_style(object,property) {... }

zu bauen, zur Übersichtlichkeit und  Fehlerprävention

Gruß plan_B