Question

我只是想在jQuery中执行以下操作：

var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'});
$(body).append(newCanvas);

这是有效的（有点）并生成以下标记：

<canvas style="width:100px; height:200px;" class="radHuh"></canvas>

正如大多数人可能知道canvas元素不太喜欢CSS维度但期望宽度和高度属性，所以这个对象创建失败了。

我知道我可以这样做：

var newCanvas = $('<canvas/>',{'class':'radHuh'}).attr({'width':100,'height':200});

相反，但我只是想知道，如果有任何方式告诉jQuery width和height在通过$('element',{attributes})创建元素而不是CSS时应被视为属性？

Answer 1

jQuery尝试将每个属性名称与jQuery函数名称匹配。匹配函数被称为。

width和height是jQuery函数，因此您的原始代码与此相同：

  var newCanvas = 
    $('<canvas/>',{'class':'radHuh'})
    .width(100)
    .height(100);

width(value)和height(value)函数设置 CSS 元素的宽度和高度。

相关的jQuery源代码行（https://github.com/jquery/jquery/blob/master/src/attributes.js#L308）

if ( pass && name in jQuery.attrFn ) {

attrFn对象定义（https://github.com/jquery/jquery/blob/master/src/attributes.js#L288）：

attrFn: {
    val: true,
    css: true,
    html: true,
    text: true,
    data: true,
    width: true,
    height: true,
    offset: true
},

Answer 2

var newCanvas = $('<canvas/>',{
                   'class':'radHuh',
                    id: 'myCanvas'                   
                }).prop({
                    width: 200,
                    height: 200
                });
$('#canvas').append(newCanvas);

<强> Proof

Answer 3

你可以这样使用

$('<canvas/>',{'class':'radHuh','Width':100,'Height':200});

更改案例并尝试

Answer 4

似乎更改任何字母的大小写将阻止jQuery将属性转换为样式，因此ranganadh可能偶然发现jQuery中的一些意外缺陷，它会根据样式检查属性，但不区分大小写。

这例如似乎也起作用了

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100});
$('body').append(newCanvas);

本机JS属性没有转换为样式，我可能会使用以下解决方案来确保它是“未来证明”（setAttribute()似乎也可以正常工作）：

var newCanvas = $('<canvas/>');
    newCanvas[0].height = 200;
    newCanvas[0].width = 100;

$('body').append(newCanvas);

Answer 5

我发现这是最好的：

$('<canvas height="50px" width="50px"/>')

您也可以通过这种方式添加id，class或其他属性。因为它不在style=""属性中，所以它不算作CSS并弄乱你的形状。

Answer 6

修改：这个速度较慢，请参阅下面的评论。

这可能会比此处发布的任何解决方法更快：

var attributes = {width: 100, height: 100, class: "whatever"};
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body);

稍微不那么漂亮，但是在功能调用较少的情况下，它实际上是相同的。

使用jQuery创建canvas元素并设置其width和height属性

6 个答案: