无法使用jQuery设置宽度，高度为<textarea>

Question

我dblclick一个段落并调用一个函数来动态地用textarea替换它，以便我可以编辑段落文本。我捕捉段落的宽度和高度并传递文本和尺寸。

$('article').on('dblclick','p', function(ev) { 
    var text = $(this).text();    // save the text  
    var dim = $(this).css(["width", "height"]); 
    $(this)        // for the p element... 
     .empty()      // wipe the p and it's text 
     .append(newTAInput(this, text, dim));  // append edited text 
}); 

此函数创建textarea，设置它的文本和尺寸，并在textarea外单击时返回已更改的文本。

function newTAInput(target, text, dim) { 
    var input = $('<textarea ></textarea>') 
     .val(text) 
     .attr(dim) 
     .css('font-family', 'Times New Roman') 
     .css('font-size', '16.37px') 
     .bind('blur', function() { 
      var value = $(this).val(); 
      $(target).html(value); 
     }); 
    return input; 
} 

它没有发生，即使是昏暗与在.attr（）函数正确的密钥和值的普通对象。

看到完整的代码中的jsfiddle：http://jsfiddle.net/tenrab/dYR4M/

Answer 1

这...

function newTAInput(target, text, dim) { 
     console.log(dim); 
     var input = $('<textarea ></textarea>') 
      .val(text) 
      .css({'font-family': 'Times New Roman', 
        'font-size': '16.37px', 
        'width': dim.width, 
        'height': dim.height 
      }) 
      .bind('blur', function() { 
      var value = $(this).val(); 
      $(target).html(value); 
     }); 
     return input; 
    } 

编辑：重构，无需链条（4） 'CSS' 方法到对方，只是将属性作为对象

Answer 2

<textarea>都不具备的width和height属性，使用CSS来设置宽度和高度。

var input = $('<textarea ></textarea>') 
    .css(dim) 

http://jsfiddle.net/dYR4M/4/

Answer 3

使用.css() ..instead的attr()。

function newTAInput(target, text, dim) { 
console.log(dim); 
var input = $('<textarea ></textarea>') 
    .css(dim) //<--here 
    .val(text) 
    .css('font-family', 'Times New Roman') 
    .css('font-size', '16.37px') 
    .bind('blur', function() { 
    var value = $(this).val(); 
    $(target).html(value); 
}); 
return input; 
} 

fiddle