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();