I-Frame Interaktion

[Gunnar Bittersmann]

@@Camping_RIDER

Nur als Ergänzung...

Die einer weiteren bedarf.

Ja, indem du beim Klick auf den Button die display-Eigenschaft per Javascript (style-Eigenschaft) änderst, alternativ kannst du die Klasse ändern und damit display:none; bzw. display:block; setzten.

Im Allgemeinen ist Letzteres besonders empfehlenswert, da bei der ersten Variante (direktes Ändern per JavaScript) Probleme auftauchen können - so ist es bspw. in den meisten Browsern nicht ohne weiteres möglich, eine solche direkte Änderung wieder rückgängig zu machen

Nein? Doch. Oh!

<HTMLElement>.style.display = ''; sollte Änderungen durch JavaScript rückgängig machen und display auf den im Stylesheet (das kann auch das Browserstyleet sein) angegebenen Wert zurücksetzen. Und zwar in den meisten (lies: allen?) Browsern.

Die Klassen-Lösung ist da deutlich flexibler, plus separation of concerns

Die Angabe, wie etwas dargestellt wird, gehört unzweifelhaft ins Stylesheet. Darum geht’s hier aber nicht; sondern darum, ob etwas dargestellt wird. Und das darf sich durchaus im Markup/DOM wiederspiegeln. Separation of concerns ist hier nicht per se ein Grund gegen Inline-style-Attribute.

Statt Klassen könnten (falls angebracht) auch data-*-Attribute eingesetzt werden,

Was für Daten sollten da drinstehen? data-hidden="true"??

Klassen sind aber im Allgemeinen einfacher zu handeln.

Inwiefern wäre [class~="hidden"] „einfacher zu handeln“ als [data-hidden="true"]? Weil es für ersteres die Kurzschreibweise .hidden gibt?

Klassen sind nicht Mittel der Wahl, wenn es bessere Attribute gibt. Womit nicht data-… gemeint ist; schon eher aria-hidden.

Aber auch das ist nicht Mittel der Wahl, wenn es ein besseres Attribut gibt: hidden. Natives HTML.

“Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.
Note: In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)” [Spec]

In JavaScript einfacher zu handeln als alles andere: <HTMLElement>.hidden = true; bzw. <HTMLElement>.hidden = false;.

Für alte IEs kann man noch [hidden] { display: none } ins Stylesheet schreiben – gegebenfalls auch mit !important.

LLAP 🖖