32

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

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

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

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

你们中的大多数人可能都知道canvas元素并不真正喜欢 CSS 尺寸，但需要一个 width 和 height 属性，所以这个对象创建对我来说失败了。

我知道我可以这样做：

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

相反，但我只是想知道是否有任何方法可以告诉 jQuery，width并且在通过而不是 CSSheight创建元素时应该将其视为属性？$('element',{attributes})

4

6 回答 6

32

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
},
于 2012-05-08T11:35:21.213 回答
30 
var newCanvas = $('<canvas/>',{
                   'class':'radHuh',
                    id: 'myCanvas'                   
                }).prop({
                    width: 200,
                    height: 200
                });
$('#canvas').append(newCanvas);

证明

于 2012-05-08T14:04:56.753 回答
10

你可以这样使用

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

换个案例试试

于 2012-05-03T14:15:08.953 回答
8

似乎更改任何字母的大小写都会阻止 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);​​​
于 2012-05-09T19:36:32.363 回答
1

我发现这效果最好：

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

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

于 2014-01-31T21:22:44.163 回答
0

编辑：这比较慢，请参阅下面的评论。

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

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

稍微不那么花哨，但它与更少的函数调用基本相同。

于 2013-02-09T15:26:39.710 回答