nicht angemeldet
Henry
Matthias Scharwies
Tabellenkalk
Henry
Rolf B
Der Martin
JürgenB
Hallo,
setProperty() fügt leider nur eine Styleangebe zum Element dazu anstatt die Angaben im StyleElement zu ändern. Contenteditable funktioniert zwar aber leider zu manuell.
Weitere Details zu meiner Frage finden sich auf der Testseite. Gibt es eine Alternative?
Btw. gehört zwar nicht dazu aber dafür extra einen neuen Thread aufmachen ist auch Quatsch: Kann JS eigentlich immer noch nicht auf Dezimalstellen runden? Ist mir nur aufgefallen, weil ich immer noch eine alte Funktion von mir dazu nutze, aber vermute mal nach den ganzen Jahren, müsste JS das auch von Haus aus können?
Gruss
Henry
Servus!
Hallo,
setProperty() fügt leider nur eine Styleangebe zum Element dazu anstatt die Angaben im StyleElement zu ändern. Contenteditable funktioniert zwar aber leider zu manuell.
Weitere Details zu meiner Frage finden sich auf der Testseite. Gibt es eine Alternative?
Nein, bis jetzt hast Du hier keine Frage formuliert. Und das gehört imho schon aus Höflichkeit zu einem Forum. Ich bin jetzt deinem Link zu w3schools gefolgt, habe [RUN] gedrückt und dann deine Frage lesen können:
„Kann man Angaben im Stylesheet oder über StyleElement ändern?“
Ja, man kann. Wir haben im SELF-Wiki drei Tutorials zu CSS und JavaScript. Das dritte führt wohl zum Ziel:
Im letztgenannten Kapitel findet sich eine gute Möglichkeit durch CSS-Variablen CSS-Werte dynamisch zu ändern.
Ansonsten ist (wenn meine Glaskugel stimmt) CSSStyleSheet.insertRule das, wonach du nicht gefragt hast.
Btw. gehört zwar nicht dazu aber dafür extra einen neuen Thread aufmachen ist auch Quatsch: Kann JS eigentlich immer noch nicht auf Dezimalstellen runden? Ist mir nur aufgefallen, weil ich immer noch eine alte Funktion von mir dazu nutze, aber vermute mal nach den ganzen Jahren, müsste JS das auch von Haus aus können?
Herzliche Grüße
Matthias Scharwies
Hallo,
Wie ich schon zu Nickily sagte: auch nichtgestellte Fragen werden hier beantwortet.
Natürlich war es anders gemeint…
Gruß
Kalk
Hallo Matthias,
Nein, bis jetzt hast Du hier keine Frage formuliert. Und das gehört imho schon aus Höflichkeit zu einem Forum. Ich bin jetzt deinem Link zu w3schools gefolgt, habe [RUN] gedrückt und dann deine Frage lesen können:
Du kannst noch so fett deine Aussage ausmalen, die mangelnde Höflichkeit kreide ich dir an.
Meien Frage war: Gibt es eine Alternative?
Wenn diese Frage sich nicht sowieso schon aus der Übersicht ergibt.
Selbst wenn ich mir nicht die Mühe gemacht hätte eine Testseite zu machen um euch das besser darzustellen, wäre aus dem Text hier heraus das viell. klar gewesen:
setProperty() fügt leider nur eine Styleangebe zum Element dazu anstatt die Angaben im StyleElement zu ändern.
Bedeutet konkret, hätte ich es mir einfacher gemacht und keine Testseite erstellt, häts hier auch kein Gemecker gegeben. Soviel zur Höflichkeit.
Ansonsten ist (wenn meine Glaskugel stimmt)
CSSStyleSheet.insertRuledas, wonach du nicht gefragt hast.
Wenn du deine Glaskugel gegen "Lesen" tauscht, hättest du gesehen, dass der Button "HTML" dazu da ist das Ergebnis anzuzeigen. Und dann siehst du, dass es nicht zum gewünschten Ergebnis führt.
Nebenfrage:
Nein
Danke, sowas habe ich gesucht.
Gruss
Henry
Hallo,
Meien Frage war: Gibt es eine Alternative?
Diese Frage folgte direkt deiner Aussage, dass es zu deiner Frage mehr Details auf der verlinkten Seite gäbe.
Also ist die Antwort: Ja, dazu gibt es die Alternative, die Frage hier im Forum zu stellen und auch hier relevante Details zu liefern.
Verlinken kann man dann den Beispielcode.
Gruß
Kalk
Hallo Matthias,
Ansonsten ist (wenn meine Glaskugel stimmt) CSSStyleSheet.insertRule das, wonach du nicht gefragt hast.
Stimmt, hat er nicht. Er möchte eine vorhandene Rule ändern.
Dafür muss man das CSSRule-Objekt aus der CSSRuleList heraussuchen und darin dann das style-Objekt manipulieren. Trivial ist das nicht, weil man über alle Stylesheets iterieren muss, darin über alle CSSRules laufen, die mit type=CSSRule.STYLE_RULE herausfinden, den Selektor abfragen, und hoffen, dass es nicht mehr als eine Rule mit dem gleichen Selektor gibt.
Ich würde davon abraten, sowas zu tun. Ein custom property (a.k.a. CSS Variable) bietet einen wesentlich klarer definierbaren Punkt, um Style-Werte zu ändern. Die Frage, ob das Ändern von Style-Rules per JS eine gute Praxis ist, kann man sicher auch diskutieren.
Und dann frag ich mich noch eins:
style.setProperty('color', 'blue');
Habe gerade keine Zeit mehr zum Probieren, aber da gibt's doch auch eine direktere Schnittstelle, oder?. Kann man nicht auch
style.color = 'blue';
//oder
style['color'] = 'blue';
schreiben?
Rolf
Hallo Rolf,
Kann man nicht auch
style.color = 'blue'; //oder style['color'] = 'blue';schreiben?
Ja kann man, und da sind wir wieder bei best practices . @Der Martin hatte ja schon gesagt, dass er lieber eine Klasse ändern würde.
Auch unser Wiki-Artikel warnt vor dem Einsatz von Element.style zur Formatierung von HTML.
Deshalb habe ich die gängigen Vorgehensweisen aufgelistet.
Die nicht vorhandene Frage wird imho weiter durch folgenden Satz verdunkelt:
"Nur ist das natürlich nicht schön, wenn einer das manuell ändern soll der keine Ahnung von CSS, JS, usw hat."
Und da hört es für mich auf, ohne eine präzise Beschreibung nach einem hypothetischen Anwendungsfall zu suchen.
Herzliche Grüße
Matthias Scharwies
Hallo Rolf,
Habe gerade keine Zeit mehr zum Probieren, aber da gibt's doch auch eine direktere Schnittstelle, oder?. Kann man nicht auch
style.color = 'blue'; //oder style['color'] = 'blue';
Doch könnte man, funktioniert auch, aber dann würde der entstehende Quelltext nicht mal die Sonderanweisung im Element (style=...) erhalten.
Der Sinn des Ganzen ist einen kleinen WYSIWYG Editor zu schaffen, der einfach nur den vorhanden Quelltext modifiziert um ihn dann zu speichern. Klar könnte man das auch so machen, für alles neuen Quelltext zu schaffen, wäre aber nicht meine Intention.
Gruss
Henry
Hallo Henry,
aber dann würde der entstehende Quelltext nicht mal die Sonderanweisung im Element (style=...) erhalten.
Wolltest Du doch eh nicht. Du willst doch CSS Style Rules verändern. Oder?
Aber mal angenommen, du wolltest das Element direkt stylen. Dann verstehe ich dich entweder miss, oder du irrst dich.
<div id="foo">
Hallo
</div>
<script type="text/javascript">
document.getElementById("foo").style.color='blue';
</script>
fügt dem div-Element style="color: blue;" hinzu.
Rolf
Hallo Rolf,
Wolltest Du doch eh nicht. Du willst doch CSS Style Rules verändern. Oder?
Ja
Aber mal angenommen, du wolltest das Element direkt stylen. Dann verstehe ich dich entweder miss, oder du irrst dich.
<div id="foo"> Hallo </div> <script type="text/javascript"> document.getElementById("foo").style.color='blue'; </script>fügt dem div-Element
style="color: blue;"hinzu.
Stimmt danke, hast du recht. Hatte ich wohl beim Experimentieren noch was anderes gemacht.
Ja passiert das Gleiche wie style.setProperty()
Aber wie du schon sagst, möchte das anders. Und da ich jetzt weiss, dass es nicht so geht, durch eine Funktion, ist meine Frage auch schon beantwortet.
Gruss
Henry
Moin,
setProperty() fügt leider nur eine Styleangebe zum Element dazu anstatt die Angaben im StyleElement zu ändern. Contenteditable funktioniert zwar aber leider zu manuell.
Weitere Details zu meiner Frage finden sich auf der Testseite. Gibt es eine Alternative?
dazu hat Matthias schon ein paar sachdienliche Hinweise gegeben.
Von mir noch ein Best Practise: Auch wenn man mit Javascript Style-Angaben manipulieren kann, sei es direkt am Element oder global im Stylesheet, halte ich das nicht für eine gute Idee. Ich empfehle stattdessen, mit Javascript Elementeigenschaften zu verändern (z.B. eine Klasse hinzufügen/wegnehmen, eventuell auch an einem Vorfahrenelement), so dass CSS auf diese Änderung reagieren und abweichende Regeln anwenden kann.
So muss ich bei einer Änderung des Stylesheets wirklich nur den CSS-Code durchsuchen, und nicht auch noch den Javascript-Code (separation of concerns).
Kann JS eigentlich immer noch nicht auf Dezimalstellen runden?
AFAIK nein. Es gibt Math.round() und Math.floor(), die runden aber nur auf ganze Zahlen. Zum Runden auf eine beliebige Stelle bleibt also nur der uralte Trick: Durch eine Zehnerpotenz dividieren, dann runden, dann wieder mit derselben Zehnerpotenz multiplizieren:
x = 100 * Math.round(x/100); // round to hundreds
Entsprechend für das Runden auf eine bestimmte Zahl von Nachkommastellen.
Soll nur der gerundete Wert für die Ausgabe formatiert werden, kommt auch noch Number.toFixed() in Frage. Damit kann man einen Zahlenwert auf eine bestimmte Dezimal-Stellenzahl formatieren - aber nicht auf Stellenwerte >1, also z.B. Hunderter.
Außerdem verlässt Number.toFixed() den Bereich der Zahlen und liefert einen String. Das kann problematisch sein, wenn man mit dem gerundeten Wert weiterrechnen muss.
Ist mir nur aufgefallen, weil ich immer noch eine alte Funktion von mir dazu nutze, aber vermute mal nach den ganzen Jahren, müsste JS das auch von Haus aus können?
Wär schön, ja.
Live long and pros healthy,
Martin
Hallo Martin,
Von mir noch ein Best Practise: Auch wenn man mit Javascript Style-Angaben manipulieren kann, sei es direkt am Element oder global im Stylesheet, halte ich das nicht für eine gute Idee. Ich empfehle stattdessen, mit Javascript Elementeigenschaften zu verändern (z.B. eine Klasse hinzufügen/wegnehmen, eventuell auch an einem Vorfahrenelement), so dass CSS auf diese Änderung reagieren und abweichende Regeln anwenden kann.
So muss ich bei einer Änderung des Stylesheets wirklich nur den CSS-Code durchsuchen, und nicht auch noch den Javascript-Code (separation of concerns).
Style-Angaben, die nur in Verbindung mit einem Javascript benötigt werden, bzw. die für die Funktion des Scripts unerlässlich sind, setze ich auch direkt im Script. Z. B. im Tabellensortierer habe ich das so gemacht. Da muss dann nur ein Scipt eingebunden werden, sonst nichts.
Gruß
Jürgen