nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
molily
Gunnar Bittersmann
Gunnar Bittersmann
molily
Hallo,
kann man mit JS eine CSS Definition ändern.
Ich meine nicht den CSS-Style eines Elementes, das bekomme ich hin
elem.style.xxx=yyyy
ich will z.B. in der CSS Klassendefinition dunkel
div.dunkel {color:black;}
die Farbe auf grün setzen.
Geht das überhaupt?
@@franca:
kann man mit JS eine CSS Definition ändern. […]
Geht das überhaupt?
Geht, ist aber umständlich. Einfacher ist es, die Klasse eines Vorfahrenelements zu ändern und Nachfahrenselektoren zu verwenden. Dann hat man auch alle Darstellungsangaben schon im Stylesheet (wo sie hingehören!!) und nicht im JavaScript. [http://forum.de.selfhtml.org/archiv/2007/9/t159017/#m1035383]
Live long and prosper,
Gunnar
Geht, ist aber umständlich. Einfacher ist es, die Klasse eines Vorfahrenelements zu ändern und Nachfahrenselektoren zu verwenden. Dann hat man auch alle Darstellungsangaben schon im Stylesheet (wo sie hingehören!!) und nicht im JavaScript. [http://forum.de.selfhtml.org/archiv/2007/9/t159017/#m1035383]
ich will ein element unsichtbar machen, wenn kein JS aktiv ist.
dafür habe ich die klasse
display:none
Wenn JS aktiv ist, soll die definition in
display:block
geändert werden.
Hintergrund:
Die auszublenenden Elemente arbeiten mit JS, sollen daher wenn JS nicht aktiv ist gar nicht angezeigt werden.
einen alternativen block blende ich mit <noscript> ein
@@franca:
ich will ein element unsichtbar machen, wenn kein JS aktiv ist.
Du widersprichst dir: „Ich meine nicht den CSS-Style eines Elementes, das bekomme ich hin“.
einen alternativen block blende ich mit <noscript> ein
Live long and prosper,
Gunnar
Hi,
Einfacher ist es, die Klasse eines Vorfahrenelements zu ändern und Nachfahrenselektoren zu verwenden.
ich will ein element unsichtbar machen, wenn kein JS aktiv ist.
das ist perfekt über das von Gunnar vorgeschlagene Verfahren durchführbar.
dafür habe ich die klasse
display:noneWenn JS aktiv ist, soll die definition in
display:block
geändert werden.
Dieses Verfahren ist suboptimal.
Cheatah
Was mein Kollege damit sagen will, ist:
es ist effektiver, alle bei JavaScript ausgeblendeten Module standardmäßig mit display: none im CSS auszublenden und bei Vergabe der Klasse "jsEnabled" im body (durch JavaScript) wieder einzublenden:
<html>
<head>
<title>JavaScript Ein- und Ausblendungen</title>
<style type="text/css">
#foo { display:none; }
.jsEnabled #foo { display:block; }
</style>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('body')[0].className += ' jsEnabled';
</script>
<h1 id="foo">Mich sieht man nur mit JavaScript</h1>
</body>
</html>
Gruß, LX
@@LX:
es ist effektiver […]
Nein, es ist haargenauso effektiv. Es mag aber effizienter sein.
document.getElementsByTagName('body')[0].className += ' jsEnabled';
Noch effizienter ist wohl
document.body.className += ' jsEnabled';
Live long and prosper,
Gunnar
Geht das überhaupt?
JavaScript kann keine Dateien öffnen oder speichern (cookies ausgenommen).
Daher denk ich wird es nicht möglich sein, da du die css-datei öffnen musst, um einen/mehrere werte zu verändern.
gruss
JavaScript kann keine Dateien öffnen oder speichern (cookies ausgenommen).
Daher denk ich wird es nicht möglich sein, da du die css-datei öffnen musst, um einen/mehrere werte zu verändern.
habe ich vergessen zu schreiben.
das css steht im html-header
@@franca:
habe ich vergessen zu schreiben.
das css steht im html-header
Das ist völlig egal, am Quelltext kannst du doch nichts ändern. Wohl aber an der Repräsentation des Stylesheets im Arbeitsspeicher des Clientrechners. Aber das sagte ich ja schon.
Ich würde es nicht tun, sondern den einfacheren Weg einschlagen. Aber das sagte ich ja schon.
Live long and prosper,
Gunnar
Hi,
kann man mit JS eine CSS Definition ändern.
Ja.
ich will z.B. in der CSS Klassendefinition dunkel
div.dunkel {color:black;}
die Farbe auf grün setzen.
[link:http://Coding.binon.net/cssRule@title=cssRule]("div.dunkel","color","green");
Gruß, Cybaer
@@Cybaer:
[link:http://Coding.binon.net/cssRule@title=cssRule]("div.dunkel","color","green");
Das hätte ich wahrlich schon in meinem ersten Posting erwähnen können, dass du wohl wieder vorbeikommst, um mit deiner Kanone auf Spatzen zu schießen. ;-)
Live long and prosper,
Gunnar
Hi,
Das hätte ich wahrlich schon in meinem ersten Posting erwähnen können, dass du wohl wieder vorbeikommst, um mit deiner Kanone auf Spatzen zu schießen. ;-)
Ja, am besten mit Link. Hätte mir die Zeit für ein Posting erspart. ;-)
Aber auch ich hätte wohl gleich erwähnen können, daß es dein Ding nicht ist, einem Entwickler alle Möglichkeiten zu präsentieren, und ihn dann selbst entscheiden zu lassen. Denn der Appetit kommt ja bekanntlich beim Essen ...
... wenn man denn überhaupt erfährt, was so alles essbar ist. ;->
Gruß, Cybaer
Hi,
... wenn man denn überhaupt erfährt, was so alles essbar ist. ;->
Gerade was die dynamische Manipulation von CSS-Regeln und die damit verbundenen Aufwaende fuer Cross-Browser-Programmierung angeht, kommt es mir meistens wieder hoch.
MfG ChrisB
Hi,
Gerade was die dynamische Manipulation von CSS-Regeln und die damit verbundenen Aufwaende fuer Cross-Browser-Programmierung angeht, kommt es mir meistens wieder hoch.
Ach, in spätestens 5 Jahren ist das vereinheitlicht ... >;->
Gruß, Cybaer
@@Cybaer:
Ja, am besten mit Link. Hätte mir die Zeit für ein Posting erspart. ;-)
Ach, die Freude will ich dir doch nicht nehmen. ;-)
Aber auch ich hätte wohl gleich erwähnen können, daß es dein Ding nicht ist, einem Entwickler alle Möglichkeiten zu präsentieren, und ihn dann selbst entscheiden zu lassen.
Ja, ich hätte auch wieder jQuery erwähnen können, um molily wieder die Chance zu geben zu erwähnen, dass diese Kanone noch viel größer ist als deine. Gewissermaßen der LHC unter den Kanonen.
Live long and prosper,
Gunnar
Hi,
Ja, am besten mit Link. Hätte mir die Zeit für ein Posting erspart. ;-)
Ach, die Freude will ich dir doch nicht nehmen. ;-)
Du weißt offensichtlich nicht, wie man Männer wirklich Freude bereitet. ;-)
Ja, ich hätte auch wieder jQuery erwähnen können, um molily wieder die Chance zu geben zu erwähnen, dass diese Kanone noch viel größer ist als deine.
Auch als verhinderter Berufssoldat kann ich dir versichern: Manchmal ist man sehr glücklich, wenn man eine größere Kanone hat - oder zumindest weiß, daß es sie gibt. ;)
(Wobei man auch sagen muß, daß das Ändern des Klassennamens, oder das im Link beschriebene Problem, halt ziemlich einfach ist - das gilt halt nicht für den Zugriff aufs CSSDOM.)
Gewissermaßen der LHC unter den Kanonen.
Frechheit! Wenn beim LHC auch solche Dilettanten wären, dann würde ich mir ernsthafte Sorgen machen ... >;-> (BTW: AFAIK kann jQuery keine CSSDOM-Änderungen, oder?)
Gruß, Cybaer
Hallo,
(BTW: AFAIK kann jQuery keine CSSDOM-Änderungen, oder?)
Nein. Aus jQuery-Sicht: wozu auch. Formatvorlagen ändern sich selten zur Laufzeit, lediglich die Elemente, auf die die Formate angewendet werden, ändern sich. Dann gibt es natürlich noch Dynamik wie Transformationen zwischen zwei Formaten oder Formate, die grundsätzlich nur zur Laufzeit berechnet werden können. Da jQuery sich auf die Arbeit mit DOM-Knoten spezialisiert, werden solche Aufgaben mit Inline-Styles gelöst.
Mathias
Hi,
Nein. Aus jQuery-Sicht: wozu auch.
Weil es Vorteile bietet, und sich manche Dinge gar nicht anders lösen lassen?
Da jQuery sich auf die Arbeit mit DOM-Knoten spezialisiert, werden solche Aufgaben mit Inline-Styles gelöst.
Tja, ist halt dumm, wenn man sich künstlich beschränkt, und auch noch CSS & JS mischten muß ...
Gruß, Cybaer
@@Cybaer:
Tja, ist halt dumm, wenn […] CSS & JS mischten muß ...
Eben. Genau das tust du aber mit 'cssRule("div.dunkel","color","green");'.
Was haben "color" und "green" im JavaScript-Code zu suchen?
Live long and prosper,
Gunnar
Hi,
Eben. Genau das tust du aber mit '
cssRule("div.dunkel","color","green");'.Was haben "color" und "green" im JavaScript-Code zu suchen?
Es ist ein vereinfachendes Beispiel (falls dir dieser Begriff etwas sagt). Wenn Du schon JS-Zugriff auf das CSS hast, dann hindert dich ja auch *niemand* daran, *dort* Werte zu hinterlegen, und *dort* auch auszulesen. Beispiel: cssRule("div.dunkel","color",cssRule(".defaultImportant","color"));, wobei man beim Klassenselektor "defaultImportant" halt alle Stile eintragen kann, die man für diesen Fall so braucht ...
Aber auf die sinnvolle Möglichkeit, CSS & JS mittels Zugriff aufs CSSDOM *strikt* trennen zu können, wird auch *explizit* auf der cssRule-Seite hingewiesen ...
... wenn man denn bereit ist, mal die Augen zu öffnen. >;->
Ist aber halt nur *einer* der Vorteile von CSSDOM-Zugriffen, gegenüber der "Inline-Schmiererei" von z.B. jQuery.
Gruß, Cybaer
@@Cybaer:
Es ist ein vereinfachendes Beispiel (falls dir dieser Begriff etwas sagt).
Ja. ;-)
Beispiel:
cssRule("div.dunkel","color",cssRule(".defaultImportant","color"));
Auch das ist keine Trennung von Präsentation (Stil) und dynamischem Verhalten, da dort im JS festgeschrieben steht, dass die _Farbe_ geändert werden soll.
Live long and prosper,
Gunnar
Hi,
Auch das ist keine Trennung von Präsentation (Stil) und dynamischem Verhalten, da dort im JS festgeschrieben steht, dass die _Farbe_ geändert werden soll.
Ja, und in JS wird mitunter sogar festgelegt, daß ein bestimmtes HTML-Element geändert werden soll. Das ist Sinn und Zweck einer Sprache, die für Dynamisierung sorgen soll.
Was das mit Trennung von HTML, CSS & JS zu tun haben soll, erschließt sich mir nicht so ganz. Vielleicht kann mir das jemand anders erklären ...
Aber Du kannst natürlich auch die ganze Regel ändern. Nur: Das hat dann kaum noch was mit Dynamisierung zu tun, wenn man nur vorgefertige Regeln austauschen können soll. Das ließe sich dann auch einfacher mit einer Änderung via className erledigen, und CSSDOM (und eigentlich auch DOM) wären recht überflssig. Aber ich vermute, daß Du ja auch genau darauf hinauswillst ... >;->
Gruß, Cybaer
@@Cybaer:
Ja, und in JS wird mitunter sogar festgelegt, daß ein bestimmtes HTML-Element geändert werden soll. Das ist Sinn und Zweck einer Sprache, die für Dynamisierung sorgen soll.
Ja. DASS ein bestimmtes HTML-Element geändert werden soll; aber nicht, WIE diese Änderung dargestellt werden soll.
Das DASS hieße Änderung eines Zustandes, die sich hervorragend im 'class'-Attribut repräsentieren lässt:
document.getElementById("foo").className = "bar";
Das WIE steht im Stylesheet:
#foo.bar {baz: quz}
JavaScript weiß nichts darüber, ob eine andere Textfarbe gesetzt wird, der Text kursiv oder fett oder durch andere Schriftgröße oder -art hervorgehoben wird, eine andere Hintergrundfarbe/ein anderes Hintergrundbild angezeigt wird ...
Hat es auch nicht zu wissen; das meine ich mit Trennung von Präsentation und Verhalten, siehe [molily]
Live long and prosper,
Gunnar
Hi,
erstmal: Schön, daß wir uns zumindest einig sind, daß 50% deines Einwands unüberlegter Bullshit waren. :)
Jetzt könnten wir zu den anderen 50% kommen. Aber ich schrieb ja, daß ich mit *dir* darüber nicht diskutieren wollte, sondern nur mit einem *anderen* (Du weißt ja: "Diskutiere nicht mit ... Sie ziehen dich runter auf ihr Niveau, und schlagen dich dort durch Erfahrung" >;->). Falls sich also jemand hier findet, der vernunftbegabt ist *und* deine Auffassung teilt, kann er sich ja hier zu Wort melden ... :-)
Davon abgesehen (leider bist Du auf meine gestelle Fall^W Frage nicht direkt eingegangen. Aber indirekt ist eigentlich auch OK:
Das DASS hieße Änderung eines Zustandes, die sich hervorragend im 'class'-Attribut repräsentieren lässt:
document.getElementById("foo").className = "bar";Das WIE steht im Stylesheet:
#foo.bar {baz: quz}
Du bist ein (heterosexueller?) Mann (das erklärt schon einiges) und vermutlich auch Beamter. Das wäre zumindest eine Erklärung für deinen erschreckenden Mangel an Kreativität bzw. hier: Dynamik.
Dynamik bedeutet nicht (nur), aus vorgefertigten Stücken (hier: vorgefertigte CSS-Regeln) auszuwählen. Es bedeutet auch, diese Stücke ändern zu können.
Mit anderen Worten: Kreativ bist du nicht, wenn du morgens vor deinem Schrank stehst, und dich entscheidest zw. dem vordefinierten "Set 1" (blaues T-Shirt, blaue Jeans, weiße Segelschuhe), "Set 2" (schwarzes T-Shirt, schwarz Jeans, schwarze Turnschuhe) und "Set 3" (weißes Hemd, grauer Anzug, scharze Lederschuhe). Dynamisch wird dein Aussehen erst, wenn Du z.B. frei kombinieren kannst (hier: dynamische Änderung der Stylesheets). Also z.B. heute mal weißes Hemd, schwarze Jeans, weiße Segelschuhe. Ich weiß, daß ist wohl etwas viel verlangt, aber gerade deswegen ist es umso sinnvoller, wenn vielleicht die Ehefrau einkauft und die Sachen in den Schrank hängt (hier: die Stylesheets erstellt), und so zum einen dafür sorgt, daß Körper & Layout strikt getrennt sind, damit sie von vorneherein nur Sachen kaufen kann, die den Dummbatz selbst durch Kombination nicht lächerlich aussehen läßt. (Im Gegenzug wäre der Oberdummbatz zu nennen, der heimlich eigene Klamotten kauft, und sie in seinem Hobbykeller versteckt (=in JS eingestrickte Stileigenschaften), und sich somit der sinnvollen Trennung zw. Körper & Layout entzieht.) :))
Gruß, Cybaer
Hallo,
Ist aber halt nur *einer* der Vorteile von CSSDOM-Zugriffen, gegenüber der "Inline-Schmiererei" von z.B. jQuery.
Inwiefern schmiert jQuery denn?
Inline-Styles sind nötig, wenn Inline-Styles nötig sind. Das sagte ich bereits. Daran ist nicht jQuery schuld und jQuery ist bloß ein Tool, mit dem ich CSS und JS vermischen kann, es aber auch trennen kann. jQuery gibt einem logischerweise auch eine Möglichkeit, Inline-Styles zu setzen. Beim Setzen einer Eigenschaft auf einen im Script berechneten Wert, z.B. bei Effekten, gibt es nur die Möglichkeit, mit Inline-Styles zu arbeiten. Hier könnte man höchstens, wie du auch vorschlägst, die Formatierungen dynamisch dem CSS entnehmen, damit im JavaScript nur die Logik »transformiere von Zustand 1 zu Zustand 2« steht, und die Zustände selbst im Stylesheet stehen.
Mathias
Hi,
Inline-Styles sind nötig, wenn Inline-Styles nötig sind.
Ist die Frage, inwieweit sie wirklich "nötig" sind. Ich sehe nicht, daß sie "nötig" wären. Warum sind sie denn deiner Meinung nach "nötig"?
IMHO werden sie verwendet, weil das "einfacher" ist, oder zumindest einfacher zu sein scheint (oder weil die Webdesigner überhaupt nicht wissen, daß man auch Stylesheets dynamisch ändern kann, bzw. daß, wenn sie es wissen, feststellen, daß es keinen Bereich gibt, wo die browserübergreifende Programmierung so ärgerlich ist). Im Webdesign wird viel Unfug gemacht, weil es einfacher zu sein scheint. Da fallen mir spontan zahlreiche Beispiele ein - das muß ich dir doch nicht sagen ...
Beim Setzen einer Eigenschaft auf einen im Script berechneten Wert, z.B. bei Effekten, gibt es nur die Möglichkeit, mit Inline-Styles zu arbeiten.
Nein, auch hier kann man das Stylesheet ändern, anstatt mit Inline-Styles zu arbeiten.
Und manchmal kann man nicht nur das Stylesheet ändern, sondern man muß es. Z.B. wenn man Pseudo-Stile/Elemente dynamisieren will (was mit Inline-Styles überhaupt nicht geht), oder wenn die Änderungen nur für den Bildschirm, aber nicht für den Drucker gemacht werden sollen (mit Inline-Styles lassen sich nur Stile setzen, die für alle Medien gelten - warum z.B. Objektanimation, die für den Bildschirm berechnet wird, auch für das Drucklayout gelten soll, erschließt sich mir eigentlich auch nicht). Und ob es wirklich sinnvoll ist, bei z.B. 1000 Elemente jeweils den Inline-Style zu verändern, anstatt einmalig die Regel für diese Elemente, sei mal auch dahingestellt ...
... zumal wenn Du selbst an anderer Stelle ja um jeden JS-Pups ringst, als wenn von einer längeren JS-Schleife der Untergang des Abendlandes abhängen würde. >;-)
Hier könnte man höchstens, wie du auch vorschlägst, die Formatierungen dynamisch dem CSS entnehmen, damit im JavaScript nur die Logik »transformiere von Zustand 1 zu Zustand 2« steht, und die Zustände selbst im Stylesheet stehen.
Das kommt noch dazu: JS soll etwas ändern, aber das Ergebnis der Änderung ist "nur" eine Stileigenschaft, und wenn die im Stylesheet steht (und damit nicht von der Arbeit des JS-Programmieres abhängt, sondern der Kontrolle des Screendesigners unterliegt, der für das Stylesheet verantwortlich ist), dann kann der CSS-Verantwortliche später noch jederzeit sagen: Super, aber die Farbe gefällt mir nicht. Da ändere ich mein CSS, und kann den JS-Code in Ruhe lassen (oder gar schlimmstenfalls: der Effekt gefällt mir mom. gar nicht, aber ich ändere nicht das JS, sondern ändere das CSS erstmal so, daß der Effekt nicht sichtbar ist).
Gruß, Cybaer