Dormilich
New member
Faustregel: jeder Wert, der aus dem DOM kommt, ist ein String. Wenn man’s genauer wissen will, braucht man sich nur die DOM Interfaces anzuschauen, da steht’s schließlich drin.
FadeIn mit JS
- Ersteller Gwunderi
- Erstellt am
Darum wohl muss man z.B. varname.style.color="#ffffbb" in Anführungszeichen schreiben?
Habe noch eine Frage zu meinem obigen Script:
Habe hier die if-Anweisung: if (transp <=1) {setTimeout(dark, 200);} weggelassen, da opacity:1 eh der höchste annehmbare Wert ist. Aber weiss das auch das Skript? Wahrscheinlich arbeitet es im Hintergrund fröhlich weiter, erhöht den Wert "endlos" um 0.1, auch wenn er es nicht setzen kann? Nehme kaum an, dass beim ersten unannehmbaren Wert (1.1) das Skript einfach stoppt?
Wäre es also zur Entlastung besser, auch hier die if-Anweisung einzubauen?
Eigentlich weil opacity vererbbar ist. Kennst Du die Methode, damit der Text nicht auch transparent wird?
Das geht mit rgba (a ist der Alphawert bzw. Transparenz) - ein Beispiel:
HTML:
<div style="background-color:green; width:200px; height:40px; padding:10px;">
<div style="background:rgba(0,238,0,0.2);">Hier ist ein Text</div>
</div>Hier dasselbe mit HEX-Farbcode und opacity:
HTML:
<div style="background-color:green; width:200px; height:40px; padding:10px;">
<div style="background-color:#00ee00; opacity:0.2;">Hier ist ein Text</div>Geht auch wenn man ein transparentes Div über Hintergrundbild legt, der Text bleibt immer schön dunkel (oder wie vorgegeben).
Konverter von HEX oder Farbname zu RGB gibt's ja online, z.B. hier:
green | RGB nach HEX bzw. HEX nach RGB
Es gibt auch so eine Methode mit zwei Kinder-Div's innerhalb eines Eltern-Div's: Einem Kind-Div gibt man die opacity, und im anderen kommt der Text hin. Da die beiden Div's auf gleicher Ebene (Geschwister) sind, kann so die opacity nicht auf den Div mit Text vererbt werden.
Oder kanntest Du das womöglich schon alles, ein "alter Hut"?
Grüsslein, Gwunderi
J
j-l-n
Guest
Ja, das ist ja nur eine Zeile und damit hast du dann "sauberen" Code.
Sehen, ob das Skript die Werte weiterhin setzt, kannst du ganz einfach, indem du testweise
console.log(document.getElementById("deine ID")style.opacity); einbaust. Dann kannst du das in der Konsole des Browsers nachschauen.Klar, ich hab's nur nochmal so umschrieben, weil Melewo zu Recht darauf hingewiesen hat, dass opacity die Transparenz und nicht die Helligkeit regelt.
Dormilich
New member
nö.
varname.style.color=#ffffbb würde einfach einen parse error verursachen (illegal character).Dachte ich's mir doch …
Wo kann ich denn das "console.log" einbauen, kannte es nicht. Habe es jetzt so im Script eingebaut, aber es passiert gar nichts:
HTML:
<script>
function dark()
{var box = document.getElementById("d2");
var transp = parseFloat(box.style.opacity);
transp = transp + 0.1;
box.style.opacity = transp;
setTimeout(dark, 200);
console.log(document.getElementById("d2").style.opacity);}
</script>Sollte dann in der Konsole unten etwas angezeigt werden? bei mir sehe ich nirgends was …
J
j-l-n
Guest
Du musst es innerhalb der Funktion, also vor
setTimeout() einbauen.Habe es jetzt so umgeschrieben:
HTML:
<script>
function dark()
{var box = document.getElementById("d2");
var transp = parseFloat(box.style.opacity);
transp = transp + 0.1;
box.style.opacity = transp;
console.log(document.getElementById("d2").style.opacity);
setTimeout(dark, 200);}
</script>Alternativ auch vor "transp = transp + 0.1" versucht - passiert immer noch nichts - habe IE11.
Edit: Habe noch etwas gegoogelt, finde es bestimmt noch heraus, wie es genau funktioniert - scheint interessant zu sein, wenn man zwischendurch kurz was testen will. Danke Dir für den heissen Tipp!
Grüsslein, Gwunderi
Zuletzt bearbeitet:
J
j-l-n
Guest
Schau mal, was die Fehlerkonsole dazu sagt!
PS: ich habe mal schnell eine etwas variablere Funktion gebaut, diese wird aufgerufen mit
Demo: CSS Transparenz per JavaScript ändern • style.opacity
PS: ich habe mal schnell eine etwas variablere Funktion gebaut, diese wird aufgerufen mit
init('ID des Elements', 'Schrittweite, in der opacity geändert werden soll', 'mehr oder weniger Transparenz', 'Funktionsaufruf in ms').Demo: CSS Transparenz per JavaScript ändern • style.opacity
Zuletzt bearbeitet:
Habe mir Deinen Code mal angeschaut, aber verstehe ihn nur zur Hälfte.
Was ich gleich sehe: kann man für beliebige Elemente im Dokument verwenden, da nach dem Funktionsnamen (ID) steht; kenne das aber noch nicht so, der Funktion mehrere Parameter mitzugeben. Auch das mode === "plus" bzw. "minus": weiss nicht, was das bedeutet … Verstehe zwar einige Ansätze, aber sieht für mich Anfängerin doch noch etwas verwirrend aus.
Was ich auch sehe: hast schrittweise um 0.02 erhöht bzw. "erniedrigt" - habe ich eben auch kürzlich herausgefunden: so läuft das FadeOut nicht so ruckartig ab.
Habe mir Deinen Link jedenfalls auf meiner Übungsseite kopiert, mal sehen, wann ich daraus richtig schlau werde. Danke Dir vielmals!
P.S. zur Fehlerkonsole: im IE8 war noch das gelbe Warndreieck - aber im IE11 soll man dazu scheint's auf diese "Entwicklertools" (mit F12) gehen, und das ist soooo was von kompliziert. Muss es wohl mal richtiggehend "studieren", wenn ich mal Zeit (und die Nerven dazu
) habe.Grüsslein, Gwunderi
J
j-l-n
Guest
Das ist schnell erklärt: damit die Funktion flexibler ist und man praktisch den umgekehrten Weg gehen kann (also Transparenz verringern), wird je nachdem
opacity um 0.02 erhöht oder erniedrigt.
Zuletzt bearbeitet:
mikdoe
Moderator
Zwei == bedeutet "ist gleich" und drei === bedeutet, ist gleich und der Typ ist ebenfalls gleich. Typ heißt, z.B. nummerisch oder Text. Gibt noch mehr, die lasse ich mal raus.
Das heißt in der Praxis z.B. '1' == 1 wäre wahr. '1' === 1 wäre aber falsch. Hingegen parseInt('1') === 1 wäre wieder wahr.
Schau mal:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<script>
if ('1' == 1) {alert('\'1\' == 1 ist wahr')}
if (!('1' === 1)) {alert('\'1\' === 1 ist falsch')}
if (parseInt('1') === 1) {alert('parseInt(\'1\') === 1 ist wahr')}
</script>
</body>
</html>Was meinst du mit "plus" bzw. "minus"?
J
j-l-n
Guest
Gwunderi bezog sich glaub ich auf mein Skript, und nicht auf den Unterschied zwischen strengem Vergleich und
==. Und zwar hatte ich da wie gesagt die Abfrage eingebaut, damit man die Funktion sowohl dazu benutzen kann, die Transparenz schrittweise zu erhöhen, als auch dazu, sie zu erniedrigen.Ja, stimmt, hatte einfach nicht gecheckt, dass das "mode" ein Funktionsparameter ist (so bezeichnet man es doch?). Habe eben absolut keine Übung, Funktionen Parameter mitzugeben. Nur gerade die "id" bei der Tabnavigation z.B. oder bei Mathe z.B. function add(x,y,z) und dann beim Funktionsaufruf: add(5,4,3) - so etwas wie unten habe ich heute zum ersten Mal ausprobiert:
HTML:
<div id="d1" onmouseup="format('d1', 'lightblue', '200px', '100px')" style="border:#333 solid 0.5px; padding:5px;">Formatiere dieses Div nach Belieben</div>
<script>
function format(id, Hfarbe, breite, hoehe)
{var box = document.getElementById(id);
box.style.backgroundColor = Hfarbe;
box.style.width = breite;
box.style.height = hoehe;}
</script>In Deinem Script ist das "mode" also einfach ein Parametername wie in meinem Beispiel "breite" oder "hoehe" - tönte eben so nach einem speziellen Code, den ich nicht kannte.
Verstehe jetzt Dein Script schon etwas besser, wenn auch noch nicht ganz, aber macht gar nichts, komme schon noch dazu wenn ich etwas anspruchsvollere Skripte angehe.
Danke Euch beiden :icon7: und Grüsslein,
Gwunderi
J
j-l-n
Guest
Genau, das hast du vollkommen richtig verstanden.
Gern geschehen!
kkapsner
Super Moderator
So - muss doch noch meinen Senf dazu geben...
Ein String als Parameter für window.setTimeout() ist langsam und gefährlich, da es ja ähnlich wie eval() funktioniert.
Außerdem ist es weniger flexibel, da man dann immer nur den globalen Scope zur Verfügung hat.
Ich würde an solche Funktionen immer eine direkte DOM-Node-Referenz übergeben. Dann kann ich auf das Element zugreifen, wie ich will.
selfhtml ist teilweise recht veraltet und an manchen Stellen auch schlechter Stil.
Ein String als Parameter für window.setTimeout() ist langsam und gefährlich, da es ja ähnlich wie eval() funktioniert.
Außerdem ist es weniger flexibel, da man dann immer nur den globalen Scope zur Verfügung hat.
Ja - ihr wollt nicht meine ersten JS-Skripte sehen...
Du solltest dir dringend einen gescheiten Codestil angewöhnen. V.A. eine saubere Codeeinrückung macht den Code viel lesbarer und wartbarer.
Bitte - gern gesehen.
Es war schon in der Funktion... ob vor oder nach dem window.setTimeout() ist egal.
Was habt ihr immer mit "ID des Elements"? Das ist total unhandlich, unflexibel und träg dazu bei, dass irgendwann jedes HTML-Element eine ID hat.
Ich würde an solche Funktionen immer eine direkte DOM-Node-Referenz übergeben. Dann kann ich auf das Element zugreifen, wie ich will.
Ein paar Bemerkungen dazu: dein HTML ist massiv invalide, die Parameter increment und method könnte man zusammenfassen (s.u.), increment und interval einen String zu geben ist komplett sinnfrei und call muss keine globale Variable sein.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Transparenz per JavaScript ändern • style.opacity</title>
<meta charset="UTF-8">
<script type="text/javascript">
function init(element, increment, interval){
function changeOpacity(){
var transp = parseFloat(element.style.opacity);
if (isNaN(transp)){
transp = 1;
}
transp += increment;
if (transp >= 0 && transp <= 1){
element.style.opacity = transp;
console.log("Opacity: " + transp);
}
else {
window.clearInterval(call);
}
}
var call = window.setInterval(changeOpacity, interval);
}
</script>
</head>
<body>
<div id="box" style="background: #000000; color: #ff0000" onclick="init(this, -0.02, 100)">
Box
<br>
(klicken, um Animation zu starten)
</div>
</body>
</html>Über den Stil hatte ich mich schon vor Jahren, als noch HTML 4.01 aktuell war, geärgert. Hatte ich mich nach dieser Aussage und dem Beispiel dazu gerichtet:
SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei
Geärgert, weil ich erst im Nachhinein mitbekam, dass ohne dieser Adresse die Seiten im IE nur im Quirks-Modus dargestellt wurden.
Von Mozilla wird eine Notierung als String nicht empfohlen, sehe den Grund mit eval ein. Mit langsamer würde ich eher als nebensächlich ansehen, so lange nur eine Funktion verzögert aufgerufen werden soll und alles andere ohnehin bereits abgearbeitet wurde.
Hier sieht es eher gemischt aus, scheint auch nicht ganz neu zu sein: setTimeout method (Internet Explorer)
Habe mal in einer Ausgabe von JavaScript - David Flanagan nachgeschlagen, da wird setTimeout nur am Rande erwähnt. Ist auch nicht die neuste Ausgabe, nur das was ich bisher als bestes deutschsprachiges Buch ansah. Doch so viele habe ich ja auch nicht von JavaScript.
J
j-l-n
Guest
Wieso das, was genau?
Ja, aber nur wenn man wie du eine Wrapper-Funktion drum rum baut. Sonst kann man das per clearInterval() nicht stoppen.
kkapsner
Super Moderator
Hinter dem </html> kommen noch einige Elemente...
Stimmt. Aber mit "Wrapper" (ich würde das nicht Wrapper nennen, da es ja die Funktion ist, die man auch aufruft) hat man dann eben keine globale Variable, die irgendwas zerschießen kann oder zerschossen werden kann. Auch braucht man das call ja außerhalb der Funktion eigentlich nicht.
J
j-l-n
Guest
Ach so, das meinst du. Das Beispiel an sich ist allerdings eigentlich ein absolut valides Dokument. Die Elemente hinter dem HTML werden aus Bequemlichkeit einfach per
auto_append_file auf jeder Seite angehängt. Ich schau mal noch, dass ich das behebe...Ja, stimmt.