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

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

证明

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