Javascript Can'；t设置宽度、高度<；textarea>；使用jQuery

我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;
}

函数newTAInput（目标、文本、尺寸）{
变量输入=$（''）
.val（文本）
.attr（dim）
.css（'font-family'、'Times New Roman'）
.css（'font-size'，'16.37px'）
.bind（'blur'，function（）{
var值=$（this.val（）；
$（目标）.html（值）；
});
返回输入；
}

即使dim是一个普通对象，在.attr（）函数中有正确的键和值，它也不会发生

请参阅JSFIDLE中的完整代码：

没有宽度和高度属性，请使用css设置宽度和高度

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

var输入=$（“”）
.css（dim）

使用
.css（）
。而不是
attr（）

函数newTAInput（目标、文本、尺寸）{
控制台日志（dim）；
变量输入=$（''）
.css（dim）/此

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;
    }

函数newTAInput（目标、文本、尺寸）{
控制台日志（dim）；
变量输入=$（''）
.val（文本）
.css（{'font-family'：'Times New Roman'，
“字体大小”：“16.37px”，
“宽度”：dim.width，
“高度”：dim.height
})
.bind（'blur'，函数（）{
var值=$（this.val（）；
$（目标）.html（值）；
});
返回输入；
}

编辑：重构，无需将4个“css”方法相互链接，只需将属性作为对象传递
您设置了行和列，而不是高度和宽度？我怀疑op能否计算段落在文本区域必须设置的行和列的数量。是否要删除属性（dim）
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;
    }