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の寸法を実際には好まないが、幅と高さの属性を期待しているため、このオブジェクトの作成は失敗しました。

私は私がただできることを知っています：

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

代わりに、それでも、CSSではなく経由で要素を作成するときに属性として扱われるべきであるwidthとjQueryに伝える方法があるかどうか疑問に思っていましたか？height$('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 に答える