web-dev-qa-db-ja.com

キャンバス要素を作成し、jQueryを使用して幅と高さの属性を設定する

私は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？

javascriptjquerycanvashtml
29
m90

jQueryは、各属性名をjQuery関数名と一致させようとします。一致した関数が呼び出されます。

widthとheightはjQuery関数であるため、元のコードはこれと同等です。

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

幅（値） および 高さ（値） 関数セット[〜＃〜] 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
},
31
Juan Mellado
var newCanvas = $('<canvas/>',{
                   'class':'radHuh',
                    id: 'myCanvas'                   
                }).prop({
                    width: 200,
                    height: 200
                });
$('#canvas').append(newCanvas);

証明 （

26
thecodeparadox

このように使用できます

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

ケースを変更して試してください

10
Ranganadh Paramkusam

文字の大文字と小文字を変更すると、jQueryが属性をスタイルに変換できなくなるため、ランガナドはおそらく、属性をスタイルと照合するが大文字と小文字を区別しない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);​​​
_
8
adeneo

私はこれが最もうまくいくことを発見しました：

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

この方法で、id、class、またはその他の属性を追加することもできます。 style=""属性にないため、CSSとしてカウントされず、シェイプを台無しにしません。

1
Superhq 2000

編集：これは低速です。以下のコメントを参照してください。

これは、ここに投稿された回避策よりも高速です。

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

少し面倒ですが、関数呼び出しが少なくても本質的には同じです。

0
Mahn