Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
[JS][CSS][HTML] CSS-Eigenschaft zu Beginn in JS auslesen
Ich versuche es lieber mal mit Worten als mit Code der auch nicht viel mehr aussagt.
Vorliegen tun die HTML…
darin ein SPAN-Bereich Namnes knopf2 der als ein Button <INPUT> bedient werden soll,
…die CSS…
in der die CLASS meiner Taste mit Attributen versehen wird (oder ist),
…die JS…
die vornehmlich auf für die Taste definierte MouseOver und MouseOut reagieren soll.
›Läuft‹ die Page passiert alles wie ich es gern hätte. Beim Aufruf allerdings, die Taste ist so gestyled wie CSS das enthält, kann die JS beim ersten MouseOver nicht die von CSS definierte (Hintergrund)Farbe ermitteln: var KnopfZwei=document.getElementById("knopf2");
farbe=KnopfZwei.style.backgroundColor;
Die farbe per alert() ausgeworfen ist beim ersten MouseOver leer/undefiniert, erst beim zweiten bekomme ich einen Wert.
Die JS-Function für das MouseOver legt einen Wert für die Farbe fest, der auch sichtbar wird, dann aber, die Kernidee der Übung, von der MouseOut-Function durch den originalen von CSS ersetzt wird…
…oder eben mehr: soll. Die für den Versuch in MouseOut händisch angegebene Farbe funktioniert natürlich, das ist alles I.O. (und diese sehe ich dann auch im o.g. Alert vor dem Färbebefehl im MouseOver).
Wie also kann ich den per CSS eingerichteten Startfarbwert erfragen um ihn beim MouseOut wieder anwenden zu können?
Offenbar hat mein knopf2 für HTML und CSS sehr wohl eine Farbe abbekommen, für JS aber erst wenn JS selbst geruht hat einen Wert dort zu schreiben. Einfach so betrachtet scheint mir das CSS-Konzept damit irgendwie nutzlos.
Da kommen schon wieder sooooo viele Fragen auf...
Erstens natürlich: Warum zum Geier wird hier ein <span> als <input> verwendet? Was soll das? Wenn es ein Eingabe-Element ist, dann nimm doch <input> wie es sich gehört. Semantik, Semantik, Semantik. HTML ist kein Wunschkonzert.
Tja... und sonst? WANN rufst du JS auf? Ist dein DOM schon soweit? Wurde die CSS-Datei denn schon geladen? Lädst du irgend etwas nicht-blockierend? Warum zum Geier arbeitest du nicht einfach mit vernünftigen JS-Frameworks wie Mootools oder jQuery?
Weil das lernen von nativem JS durchaus sinnvoll ist - Frameworks oder Bibliotheken zu benutzen lohnt sich für komplexere Aufgaben.
Zeig doch mal deinen Code..
Wenn man nur schnell ein Problem lösen will, dann ist das mit nem Framework schlichtweg effizienter gelöst. Wenn du die Frameworks über ein CDN lädst kosten sie kaum Traffic und Zeit. Zum Lohn winken signifikant weniger Cross-Browser - Probleme und natürlich n schön leicht zu nutzendes DOM-Ready - Event.
Ich werde erstmal 80kbyte laden lassen aus einem CDN welches möglicherweise gerade einen Latenz-Peak um auf ein CSS-Property zugreifen zu können? Mal abgesehen davon wäre die Ausführungsgeschwindigkeit von nativem JS gegenüber einer Bibliothek wie jQuery ein weiterer Grund für simple Aufgaben natives JS zu benutzen....
TE möchte natives JS benutzen - nur so mal am Rande
...Warum zum Geier wird hier ein <span> als <input> verwendet? Was soll das? Wenn es ein Eingabe-Element ist, dann nimm doch <input> wie es sich gehört. Semantik, Semantik, Semantik. HTML ist kein Wunschkonzert....
Bei nicht-paranoiden Leuten liegt jQuery sowieso zu 90% schon im Cache.
@Topic: Wie Daaron bereits sagte darf das JS erst erst ausgeführt werden, wenn die Page (bzw. der Teil den du "lesen" möchtest) schon komplett gerendert ist. Nur weil das JS nach dem CSS steht heißt das nicht, dass das eine passiert nachdem dass andere schon komplett ausgeführt ist!
€: Wenn das erste Mal lesen erst beim mouseOver passiert, wird es daran gar nicht liegen... Zeig mal den relevanten Teil deines JS-Codes.
Zum einen mal ist das mit SPAN einfach nur abgeschrieben und funktioniert als Test erst mal überhaupt. Es geht um eine Kontrolle von «Buttons» und ich muss mal zusehen INPUT nicht zu verwenden weil es da Begleiterscheinungen gibt die nichts mit dem eigentlichen Problem zu tun haben.
Tja... und sonst?
Wie wäre es mit direkten Antworten satt sich um für mich und den Fall ungelegte Eier zu kümmern; Vorschläge statt Fragen die mir nicht zur Antwort zu Gebote stehen?
WANN rufst du JS auf?
Sowohl bei BODY OnLoad (definiert ‹farbe›), aber das entzöge sich der Kontrolle für dieses Teilprobem, im Weiteren einfach als onmouseover="Function()".
Ist dein DOM schon soweit?
Die Frage verstehe ich nicht. Ich habe DOM (auch) noch nirgends anderswo ›bereit gemacht‹. Tatsächlich gemacht habe ich was in der Frage steht, mehr nicht und nicht weniger.
Wurde die CSS-Datei denn schon geladen?
Aus welchem Grunde sonst sollte sich der Button denn »entsprechend CSS« einfärben, beim Aufruf?
Lädst du irgend etwas nicht-blockierend?
-- Böhmisches Dorf --
Warum zum Geier arbeitest du nicht einfach mit vernünftigen JS-Frameworks wie Mootools oder jQuery?
Warum? Ein kleines Handwerkliches Problem bedarf keines Industrieparks.
Zeig doch mal deinen Code..
Wie viele/wenige Einzelzeilen in 3 mickrigen Files sollen es sein? Das verbessert nichts, aber bitte (wobei mich ärgert, dass ich wilden Testcode mühsam reinigen muss…)
TEST2.HTM
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./TESTCSS2.css">
</head>
<body OnLoad="RandomOrNot();">
<script src="./TES2T.js" type="text/javascript"></script>
<span class="knopf2" id="knopf2" value="Tolle Taste" type="submit" onmouseover="K2MausUeber()" onmouseout="K2MausRaus()">Knopf 2</span>
</body>
</html>
/* JavaScript Document */
function RandomOrNot() {
var farbe;
}
function K2MausUeber() {
var KnopfZwei=document.getElementById("knopf2");
farbe=KnopfZwei.style.backgroundColor;
alert("Piep <"+farbe+">");
KnopfZwei.style.backgroundColor="00ff00";
}
function K2MausRaus() {
var KnopfZwei=document.getElementById("knopf2");
KnopfZwei.style.backgroundColor="ffff00";
}
Zum Lohn winken signifikant weniger Cross-Browser - Probleme
Den 5. Schritt vor dem 1. tun wollen bringt nicht viel…
Die Frage ist nicht wie toll ich programmiere sondern ob sich eine Aufgabenstellung überhaupt unter gewissen Bedingungen lösen lässt, ob die konzeptionelle Idee taugt.
@Topic: Wie Daaron bereits sagte darf das JS erst erst ausgeführt werden, wenn die Page (bzw. der Teil den du "lesen" möchtest) schon komplett gerendert ist. Nur weil das JS nach dem CSS steht heißt das nicht, dass das eine passiert nachdem dass andere schon komplett ausgeführt ist!
Hmtja - was da der Browser darf oder nicht entzieht sich mir und ich habe mir da auch noch nie den Kopf drüber zerbrochen noch Tipps gelesen auf so was zu achten geschweige wie man das kontrolliert.
Meinem bescheidene Verständnis nach ist alles geladen, auch die Taste, und dann kommt ein simples MouseOver…
€: Wenn das erste Mal lesen erst beim mouseOver passiert, wird es daran gar nicht liegen... Zeig mal den relevanten Teil deines JS-Codes.
Siehe oben.
@Smartass
Ich warte auf das kleine Handbuch das einem mal alle Syntax listet und im Kern erklärt.
leave(this) lässt mich im Regen weil ich keinen Plan habe was dieses This wann und immer darstellt. Und da ich durchaus mehrere Buttons im Auge habe und sich diese in Benutzung (durch andere Mechanismen) unterscheiden - allein deswegen geht es leider nicht INPUT oder SPAN global mit CSS / Styling zu bedienen, ich muss [?] CLASSes benutzen um die Schäfchen auseinanderzuhalten.
Den CSS-Code will ich so weit aus dem HTML raushalten wie möglich da das alles nicht eine schöne, fertige Page ist sondern ein Gefrickel an maschinenerzeugtem Code den ich so gut es geht in Ruhe lassen will um nicht mit Serien von Ausnahmen (von mir aus) 50 von 80 Dateien nachzubessern. Das muss alles aus Rohangaben so automatisiert und uniform ablaufen wie es geht. Sonderfunktionen kommen dann über selbstgebaute «Interfaces» hinzu…
Die Buttons waren mal simple Grafiken die sich auf einfache Weise über JS und OnClick usw. austauschen und anderweitig manipulieren ließen. Und nun bekomme ich CSS aufs Auge und muss zusehen wie ich »irgendwas« als Schaltfläche zum Arbeiten bekomme bei der dann der Button-Text Fließtest ist der welcher sich sehr dynamisch je ›Projekt‹ ändert; z.B. eine andere Sprache für die selbe Funktion. Gerippe soll stehen, Texte werden injiziert. So einfach solls sein, wurde mir gesagt. Und da bin ich nun dran wie ich Buttons (muss nicht mal MouseOver sein, ich habe einfach diesen Trigger verwendet) so einrichte, dass sie nach Rechnergebnissen und anderen Ereignissen von JS aus so dynamisch wie möglich (CSS auswerten) angepasst werden können - Farbe wäre da mal die 1. Stufe… Denn die CSS können sich ändern, die zu transportierende Funktion nicht. Z.B. anderes Äußeres, Hinweise in Ampelfarben als Motor universell.
Tja... und sonst?
Wie wäre es mit direkten Antworten satt sich um für mich und den Fall ungelegte Eier zu kümmern; Vorschläge statt Fragen die mir nicht zur Antwort zu Gebote stehen?
Zeig doch mal deinen Code..
Wie viele/wenige Einzelzeilen in 3 mickrigen Files sollen es sein? Das verbessert nichts, aber bitte (wobei mich ärgert, dass ich wilden Testcode mühsam reinigen muss…)
Ich verspreche dir, dass dir hier in Zukunft keiner mehr auf die Nerven geht, wenn du deine Probleme fortan einfach selbst googlest. So wie du dich hier aufführst hab ich jedenfalls keine Lust dir die Lösung vorzukauen.
Einen Tip gibts aber trotzdem gratis. Deine Funktion RandomOrNot macht genau gar nichts.
Klar das dein Script nicht so funktioniert wie du willst.
Du liest nicht das Css aus, sondern das Style-Attribut direkt auf dem Tag. Und das ist eben leer, weil es erst beim hover gesetzt wird.
Schau mal nach computedStyle. Das ist was du brauchst. Das liest nämlich nicht das Style Attribut aus, sondern den Style den das Element angenommen hat.
Zeig doch mal deinen Code..
Wie viele/wenige Einzelzeilen in 3 mickrigen Files sollen es sein? Das verbessert nichts, aber bitte (wobei mich ärgert, dass ich wilden Testcode mühsam reinigen muss…)
Wie du siehst, konnte ich dadurch das du deinen Code vollständig gepostet hast, den Fehler direkt finden.
Ohne wäre mir das nicht aufgefallen (und den anderen ja auch nicht).
Wie wäre es mit direkten Antworten satt sich um für mich und den Fall ungelegte Eier zu kümmern; Vorschläge statt Fragen die mir nicht zur Antwort zu Gebote stehen?
Die Fragen dienen dazu die Fehlerquelle zu finden.
Als langjähriger Programmierer lernt man auch sauber zu arbeiten. Das einem da sematische Fehler wie bspw span anstatt input direkt auffallen ist ein Automatismus.
Du hast bspw auf dem span noch die Attribute type und value. Die gibt es aber bei einem span nicht.
Jeder Validator spuckt da übrigens einen Fehler.
Auch ist es nicht sehr schön über Javascript direkt CSS-Werte zu ändern (mal abgesehen von errechneten Positions- oder Größenangaben).
Schöner ist es, wenn man einfach die Klasse wechselt.
@WhiteShark Klar das dein Script nicht so funktioniert wie du willst.
Du liest nicht das Css aus, sondern das Style-Attribut direkt auf dem Tag. Und das ist eben leer, weil es erst beim hover gesetzt wird.
Hmmm… Ich hatte nicht vor direkt das CSS auszulesen - sofern JS das überhaupt könnte. Wäre theoretisch die Sorte Weg die ich in vielen anderen Fällen nämlich tatsächlich gehe.
Warum sollte ein Style erst beim Hovern gesetzt werden; ich könnte rein theoretisch durch völlig andere Trigger mir erlauben diesen Button auslesen zu wollen - oder ihm eine Farbe zuzuweisen. Es würde ja z.B. auch onMuseDown an diesem Button als Event in Frage kommen (zu bunt & flippig will ichs gar nicht treiben, JS soll am Ende auch nur nach logischen Maßnahmen die Farben anpassen…)
Mein Dilemma:
Diese Codestücke von Google und andere Informationen (ein «background-color: …;» entspräche dem «….style.backgroundColor;») erlauben die Denkart, dass CSS dem Objekt der Begierde eine Eingenschaft zuweist - und damit hat es diese, womit andere Instanzen - JS - sie auch ermitteln können müssten. Mit dem Code den man so findet sollte es nach mehreren Quellen klappen, kein Wort, kein Verweis auf »computedStyle« (und eben solche Lücken grätzen mich beim Googlen mehr als an).
Schau mal nach computedStyle. Das ist was du brauchst. Das liest nämlich nicht das Style Attribut aus, sondern den Style den das Element angenommen hat.
Die alte Leier - ohne eine (intelligente) Syntaxsammlung steht der beste Programmierer im Wald. Oder anders ausgedrückt: was ich nicht kenne danach kann ich nicht googeln.
Nach o.g. Suchtreffen lese ich in der Tat den Style als ganzes aus und kann dem das Farb-Attribut entreißen… Musste ich jedenfalls so verstehen.
Wie du siehst, konnte ich dadurch das du deinen Code vollständig gepostet hast, den Fehler direkt finden.
Sollte ich mich irren müssten die in meiner Frage angegebenen Zeilen genau die sein die du hier meinst?! Dann hätte mich mein Instinkt wenigstens nicht zu sehr getrogen.
Jeder Validator spuckt da übrigens einen Fehler.
Wie loben Google und seine Treffer…
Es mag sein, dass ein DIV ebenso wirkt wie SPAN. INPUT selbst mag auch tun, aber ich muss dem ausweichen da in einer anderen CSS' eben dieses formatiert wird. Wiederum bemühe ich INPUT weil es ab Werk einen Button liefert, mit Beschriftung (!).
Wie die korrekte Kapselung aussieht werden wohl Experimente zeigen müssen, computedStyle dürfte wenigstens das JS-Problem beseitigen?!
Schöner ist es, wenn man einfach die Klasse wechselt.
Da fragst du mich aber was mit. Wie geht denn so was? Ob ich eine Grafik tausche, den Farbwert oder die Klasse - alles würde durch die Events getriggert, käme damit für die Programmlogik aufs selbe raus. Wäre nur zu fragen ob andere Dinge denen ich gehorchen muss (z.B. Austausch der Buttontexte) sich so oder so einfacher einflechten lassen; da beißen wie üblich den Letzten die Hunde.
CN8
PS… «Deine Funktion RandomOrNot macht genau gar nichts. »
Doch, doch; sie tut was. Sie legt eine globale Variable an die ich auch in HTML greifen könnte wenn ich müsste. Darin - auch wenns so nicht dasteht - kann ich die Ur-CSS-Buttonfrabe einlagern (und zwar in dieser Function, deren Name von älteren Tests stehen bleib) um bei den Mausaktionen drauf zuzugreifen. Je Button eine Variable…
Was ist mit der einfachen Regel: Mach es von Anfang an richtig?
Du schreibst hier z.B. vollkommen vermurksten HTML-Code, der weder semantisch noch syntaktisch korrekt ist. <span> hat z.B. kein type-Attribut... so etwas kann zu lustigen Folgefehlern führen.
Die Frage verstehe ich nicht. Ich habe DOM (auch) noch nirgends anderswo ›bereit gemacht‹. Tatsächlich gemacht habe ich was in der Frage steht, mehr nicht und nicht weniger.
Jeder vernünftige Browser bietet ein Event, sobald der DOM bereit ist. Für die Holzklasse gibt es Cross-Browser - Lösungen in jedem guten Framework. DOM-Ready zündet früher als onLoad und sorgt so für weniger Augenkrebs & Fehldarstellungen. ABER: DOM-Ready zündet teilweise BEVOR CSS komplett geladen wurde (und garantiert, bevor Bilder geladen wurden).
Lädst du irgend etwas nicht-blockierend?
-- Böhmisches Dorf --
Tja, dann hast du jetzt wieder etwas gelernt... und zwar die kleinen Zauberworte "async" und "defer", anzuwenden in etwa so:
<script type="text/javascript" src="theme/js/theme.min.js" async defer></script>
Aber... natürlich nur für Erwachsene, die sich auch mal trauen, einen HTML5-DOCTYPE zu verwenden.
Warum zum Geier arbeitest du nicht einfach mit vernünftigen JS-Frameworks wie Mootools oder jQuery?
Warum? Ein kleines Handwerkliches Problem bedarf keines Industrieparks.
Blöd nur, dass dein "kleines handwerliches Problem" bei Verwendung von jQuery, Mootools und Co gar nicht erst aufgetreten wäre. document.getElementById("logo").style.backgroundColor; zum Beispiel gibt NICHT wie erwartet die in ner CSS-Datei definierte Hintergrundfarbe von #logo, sondern funktioniert AUSSCHLIESSLICH bei Inline-Styles. Und was haben wir über die in früheren Sitzungen gelernt? Genau: Nich machen!
Wenn du "nacktes" JavaScript für so etwas verwenden willst, dann musst du z.B. den Umweg über getComputedStyle wählen. Blöd nur, dass das in IE<=8 nicht funktioniert. Also musst du für DEN wiederum NOCH einen Hack schreiben. Und noch einen... und noch einen...
Also fürs nächste Mal, hier der jQuery - Way: var color = jQuery('#logo').css("background-color");
Zeig doch mal deinen Code..
Wie viele/wenige Einzelzeilen in 3 mickrigen Files sollen es sein? Das verbessert nichts, aber bitte (wobei mich ärgert, dass ich wilden Testcode mühsam reinigen muss…)
Du stellst hier laufend solche obskuren Fragen und hast immer noch nicht gelernt, wie das hier läuft?
DU willst UNSERE Hilfe, also setzt DU dich erst einmal auf den Arsch und schreibst eine minimalistische Testumgebung in jsFiddle. Selbige verlinkst du hier. Dann können WIR schnell drüber gucken und in Echtzeit debuggen.
Nein, bei dir scheint die Devise ja zu lauten: Bloß nicht zu viele Informationen rausgeben, bloß nicht zu viel Mühe machen. Nicht, dass mir einer meine trivialen Ideen klaut.
Zum Lohn winken signifikant weniger Cross-Browser - Probleme
Den 5. Schritt vor dem 1. tun wollen bringt nicht viel…
Pech für dich, dass der 5. Schritt dich hier mit "Rücke vor bis auf Los" belohnt hätte... Aber nein, du weißt ja alles 1000x besser als die wirklich erfahrenen Webentwickler hier. Deshalb fragst du auch so selten....
Die Frage ist nicht wie toll ich programmiere sondern ob sich eine Aufgabenstellung überhaupt unter gewissen Bedingungen lösen lässt, ob die konzeptionelle Idee taugt.
Weite Teile davon hätten wunderbar in reinem CSS mit :hover funktioniert. Aber auch hier musst du das Rad ja nicht nur neu erfinden sondern versuchst es auch noch mit Ecken zu verbessern...
€: Wenn das erste Mal lesen erst beim mouseOver passiert, wird es daran gar nicht liegen... Zeig mal den relevanten Teil deines JS-Codes.
Tut es auch nicht. Es liegt daran, dass du das styles-Attribut falsch verstehst bzw. nicht von Anfang an auf Frameworks setzt.
Noch einmal für dich das Motto von jQuery: write less, do more.
Ich warte auf das kleine Handbuch das einem mal alle Syntax listet und im Kern erklärt.
Wie wäre es, wenn du statt dessen mal eine Ausbildung in der Richtung machst? Tja, dei dauert dann aber auch ein paar Jährchen inklusive der nötigen Praxis.
Andererseits hätte auch Stackoverflow dein Problem behandelt.
leave(this) lässt mich im Regen weil ich keinen Plan habe was dieses This wann und immer darstellt.
"this" ist eine Referenz auf ein Objekt, dessen Funktion man gerade ausführt. Grundlagen der Objektorientierung. Wenn man nicht gerade mit reinem C aufgewachsen ist sollte man sowas kennen.
Im Falle von JS-Events: "this" ist das DOM-Element, das das Event auslöst.
Und da ich durchaus mehrere Buttons im Auge habe und sich diese in Benutzung (durch andere Mechanismen) unterscheiden - allein deswegen geht es leider nicht INPUT oder SPAN global mit CSS / Styling zu bedienen, ich muss [?] CLASSes benutzen um die Schäfchen auseinanderzuhalten.
Müssen wir das auch wieder durchkauen? Ich dachte, das Thema hätten wir schon abgehakt. Element-Bezeichner, wenn alle Elemente betroffen sein sollen (z.B. "alle <blockquote> sollen eingerückt, größer geschrieben und kursiv sein"). Klassen, wenn viele Elemente (nicht zwingend identische Elemente) sich gleich verhalten sollen. IDs wenn es auf einzigartige Elemente hinausläuft
Wenn du es also, gemäß "mach es von Anfang an richtig", direkt richtig machen willst:
1.) DOCTYPE für HTML5 verwenden, öffnet dir viele tolle Möglichkeiten... vor allem...
2.) data-Attribute... Es geht nix über frei definierbare data-Attribute. Tolle Dinger. Man könnte z.B. sagen <button class="colorswap" data-color1="#f00" data-color2="#0f0">... und dann an JEDEN Button der Klasse colorswap ne Funktion für onmouseover/onmouseout binden, dass der Hintergrund auf data-color1/2 gesetzt werden soll.
3.) Verwende ein Framework. Auch wenn Profis für kompakte, hochoptimierte Anwendungen lieber "nacktes" JS schreiben, so ist das in 99% der Fälle doch nur Show. Die Leistungsverluste sind marginal, die Gewinne hinsichtlich Les- und Wartbarkeit des Codes, Fehlertoleranz und Produktivität aber gigantisch. Du hast ja hier selbst für ein Musterbeispiel gesorgt. Eine Ziele jQuery, Dutzende "nacktes" JS.
Ergänzung ()
cumulonimbus8 schrieb:
Mit dem Code den man so findet sollte es nach mehreren Quellen klappen, kein Wort, kein Verweis auf »computedStyle« (und eben solche Lücken grätzen mich beim Googlen mehr als an).
Es mag sein, dass ein DIV ebenso wirkt wie SPAN. INPUT selbst mag auch tun, aber ich muss dem ausweichen da in einer anderen CSS' eben dieses formatiert wird.
<div> ist kein <span>. Divs sind Blöcke, Spans sind Inline. Großer Unterschied in der Semantik. Und wenn weiter "oben" im CSS was definiert ist, das dir in dem Fall nicht schmeckt: Überschreib es. Wenn nicht irgend ein Vollidiot mit !important gearbeitet hat musst du nur den Gewichtungs-Regeln von CSS folgen und BÄM!
PS… «Deine Funktion RandomOrNot macht genau gar nichts. »
Doch, doch; sie tut was. Sie legt eine globale Variable an die ich auch in HTML greifen könnte wenn ich müsste.
Das kann man auch ohne onLoad-Event haben... sollte man auch. <script type="text/javascript">var farbe = "";</script>. Oder du lagerst, so wie es sich gehört, alle JS-Funktionen in eine JS-Datei aus. In selbiger steht oben die Deklaration deiner Variablen außerhalb einer Funktion.
PS… «Deine Funktion RandomOrNot macht genau gar nichts. »
Doch, doch; sie tut was. Sie legt eine globale Variable an die ich auch in HTML greifen könnte wenn ich müsste.
Googlen muss btw offenbar auch gelernt sein. Natürlich musst du nach deinem Problem suchen und dafür brauchst du die Antwort ja nicht zu kennen. Bei einer Suche nach "javascript style empty" fördert der 2. Link die Antwort mit computedStyle zutage.
Wenn man programmieren will, dann ist Google (oder eine andere Suchmachine) wirklich dein Freund.
Das wichtigste ist immer zu wissen wie man diese Suchmachine bedient.
Du willst CSS-Eigenschaften auslesen, also gibts du bspw ein "javascript css auslesen".
Der erste Treffer bringt einen zu Selfhtml, dort wird nur beschrieben wie man das Style-Attribut ausließt.
Der zweite Treffer zeigt aber wie man ComputedStyle verwendet: http://www.quaese.de/HTML-Design/texte/js/scripts/css_auslesen/css_auslesen.html
Das style-Attribut ist in deinem Quellcode zu anfang wirklich leer.
Damit Javascript etwas liefert, müsste das bspw so aussehen:
Code:
<span style="background-color:#f00;">Blub</span>
Es mag sein, dass ein DIV ebenso wirkt wie SPAN. INPUT selbst mag auch tun, aber ich muss dem ausweichen da in einer anderen CSS' eben dieses formatiert wird.
HTML-Tags sind etwas was man nie stylen sollte. Man stylt immer nur Klassen.
Dann hat man auch kein Problem, wenn man aus einem Span ein input machen muss, die Klasse bleibt die gleiche.
Wenn du an das andere CSS aber nicht rankommst, musst du notgedrungen unsauber arbeiten.
Ein div wirkt übrigens anders als span. Span ist ein inline-Element, div ein block-Element.
Schöner ist es, wenn man einfach die Klasse wechselt.
Da fragst du mich aber was mit. Wie geht denn so was? Ob ich eine Grafik tausche, den Farbwert oder die Klasse - alles würde durch die Events getriggert, käme damit für die Programmlogik aufs selbe raus. Wäre nur zu fragen ob andere Dinge denen ich gehorchen muss (z.B. Austausch der Buttontexte) sich so oder so einfacher einflechten lassen; da beißen wie üblich den Letzten die Hunde.
Und die Klasse .blub kannst du dann anders Stylen.
PS… «Deine Funktion RandomOrNot macht genau gar nichts. »
Doch, doch; sie tut was. Sie legt eine globale Variable an die ich auch in HTML greifen könnte wenn ich müsste.
Da irrst du dich. Die Variable wird innerhalb der Funktion erstellt und ist nur lokal in der Funktion verfügbar.
Global wäre sie wenn du das var weglassen würdest.
Einfacher, gerade für den Anfang, wird es wenn man ein Framework nimmt.
Denn wie du im obrigen Link siehst, muss man in verschiedenen Browsern den ComputedStyle anders auslesen.
Mit jQuery bspw geht das wesentlich einfacher:
Code:
alert( $('#meine-id').css('background-color') );
Das liefert dir die Background-Color unabhängig ob diese per style oder per CSS gesetzt wurde.
Genauso gibt es schöne Funktion wie addClass und removeClass.
Über unterschiedliche Browser brauchst du dir keine Gedanken machen.
Es hat einen Grund warum diese Frameworks so verbreitet sind. Denn die nehmen einem sehr viel Arbeit ab.
Da wage ich zu widersprechen... <blockquote>, <q>, <p>, <h*>, <input type="XY">... die sollen i.d.R. auch ohne Klassen identisch aussehen. Macht das Leben in einem CMS signifikant leichter. Auch img {max-width:100%; height: auto;} ist Standard.
Genauso gibt es schöne Funktion wie addClass und removeClass.
Truth suffers from too much analysis
- Ancient Fremen saying
Every judgment teeters on the brink of error. To claim absolute knowledge is to become monstrous. Knowledge is an unending adventure at the edge of uncertainty.
- Leto Atreides II
Ich habe nicht alles gelesen aber wenn du nur die Background-Color beim Mouse-Over austauschen willst warum greifst du dann zu JS?
Das kann auch CSS erledigen....
![[ChAoZ]](https://pics.computerbase.de/forum/avatars/m/491/491529.jpg?1618073566){kind=avatar}
