javascript - 使用 jQuery 创建 Canvas 元素并设置其宽度和高度属性

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