Skip to content

georf.de

Open-Source, Rostock und mehr

Menu
  • Ägypten
  • Marokko
  • Datenschutzerklärung
  • Impressum
Menu

Div mit Textarea ersetzten

Posted on 28. Mai 201228. Mai 2012 by georf

Möchte man eine Seite dynamisch bearbeiten, gibt es die Möglichkeit die Inhalte mit einer Textarea zu ersetzen. Normalerweise sehen die Inhalte in einer Textarea jedoch deutlich anders aus, als die Inhalte der Seite. Gerade, wenn man den Inhalt einer Überschrift auf diese Weise zur Bearbeitung anbieten möchte.

Bindet man die Textarea nun an die gleichen CSS-Eigenschaften, die für das Div oder H1-Element festgelegt sind, wird einem auffallen, dass es bei dem Wechsel zur Textarea eine Abstandskorrektur vom Browser gibt. Es scheint, als ob bei folgenden Szenario die ersten beiden Elemente dichter zusammen sind, als die zweiten und das obwohl die Abstandseigenschaften gleich sind.

<div style="margin:5px; padding:0"></div>
<div style="margin:5px; padding:0"></div>

<textarea style="margin:5px; padding:0"></textarea>
<div style="margin:5px; padding:0"></div>

Dieses Problem liegt an den Standardeinstellungen der Display-Eigenschaft. Div und Überschrift-Elemente sind standardmäßig auf block gestellt, während eine Textarea auf inline steht. Korrigiert man dieses, kann ein gleiches Aussehen erreicht werden.

Mittels folgenden Jquery-Anweisungen kann eine fast identische Textarea eingefügt werden:

var div = $('#div'),
textarea = $('<textarea></textarea>'),

// set the same style
styles = [
// font
'font-family','font-style','font-variant','font-size','font-weight',
'word-spacing','letter-spacing','text-decoration','text-transform',
'color','text-shadow','font-stretch',
// paragraph
'text-indent','line-height','vertical-align','text-align','white-space',
// margin
'margin-top','margin-right','margin-bottom','margin-left',
// padding
'padding-top','padding-right','padding-bottom','padding-left',
// others
'width','height','border','display'];

$.each(styles, function( i , style ) {
textarea.css(style, div.css(style));
});
div.after(textarea).remove();

Schreibe einen Kommentar Antworten abbrechen

Du musst angemeldet sein, um einen Kommentar abzugeben.

Neueste Beiträge

  • Kärcher-Staubsauger-Reparatur
  • Hoftor – Steuerung mit Energiesparfunktion
  • Dualstack-Webserver hinter privater IPv4-Adresse
  • Hoftor mit WLAN und MQTT aufrüsten
  • LED-Stoppuhr für Wettkämpfe

Kategorien

  • Allgemein (37)
  • Deutsch (6)
  • IT (73)
    • BKampfBot (7)
    • Datenschutz (5)
    • Elektronik (6)
    • Informatik (18)
    • Linux (26)
    • Programmierung (31)
    • Webseite (25)
  • Reparatur (1)
  • Rezepte (18)
  • Rostock (21)

Schlagwörter

anonym Arduino Backup Bash Basteln BKampfBot C++ Codierung Datenbank Debian Dokumentation Drucker E-Mail Erbsen Fahrradweg Feuerwehrsport Git Github HttpClient Javascript JSON Kirschen Kuchen LEDs Linux Löten MySQL Nginx PHP Python Quark Quellcode Regex RegHex Reis Samba Scanner Server Sinnlos Trac Transmission Ubuntu Weihnachten Zotac ß
©2023 georf.de | Built using WordPress and Responsive Blogily theme by Superb