Creazione di un elemento canvas e impostando la larghezza e l'altezza attributi utilizzando jQuery

Question

Stavo solo cercando di fare quanto segue in jQuery:

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

Questo è il lavoro (tipo di) e genera il seguente markup:

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

Come molti di voi potrebbero sapere che gli elementi canvas non amano le dimensioni CSS ma prevedono un attributo larghezza e altezza, quindi la creazione di questo oggetto non è riuscita.

so ho potuto solo fare:

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

invece, ma mi stavo chiedendo comunque se non v'è alcun modo di dire jQuery che width e height devono essere trattati come attributi quando si crea l'elemento tramite $('element',{attributes}) e non come CSS?

Answer 1

jQuery cercare di abbinare ciascun attributo Name con un nome di funzione jQuery. Vengono chiamate le funzioni corrispondenti.

width e height sono funzioni jQuery, in modo che il codice originale è equivalente a questo:

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

width(value) e height(value) funzioni impostate CSS larghezza e l'altezza di un elemento.

---

Rilevante linea jQuery codice sorgente (https://github.com/jquery/jquery/blob/master/src/attributes.js#L308)

if (pass && name in jQuery.attrFn) { 

attrFn definizione dell'oggetto (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

È possibile utilizzare come questo

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

Cambiare il caso e cercare

Answer 3

var newCanvas = $('<canvas/>',{ 
        'class':'radHuh', 
        id: 'myCanvas'     
       }).prop({ 
        width: 200, 
        height: 200 
       }); 
$('#canvas').append(newCanvas); 

Proof

Answer 4

Sembra che cambiare il caso di una lettera impedisca a jQuery di convertire l'attributo in uno stile, quindi Ranganadh probabilmente si è imbattuto in qualche difetto non voluto in jQuery dove controlla l'attributo rispetto agli stili, ma senza distinzione tra maiuscole e minuscole.

Questo per esempio sembra funzionare bene ??

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100}); 
$('body').append(newCanvas);​​​ 

Gli attributi nativi JS non vengono convertiti in stili, e probabilmente sarei andare con la soluzione di seguito per assicurarsi che sia "a prova di futuro" (setAttribute() sembra funzionare aswell fine):

var newCanvas = $('<canvas/>'); 
    newCanvas[0].height = 200; 
    newCanvas[0].width = 100; 

$('body').append(newCanvas);​​​ 

Answer 5

Modifica: Questo è più lento, vedere i commenti di seguito.

Questo sarà probabilmente più veloce di qualsiasi soluzione postato qui:

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

Un po 'meno elaborato, ma è esentially lo stesso con chiamate di funzione meno.

Answer 6

ho scoperto che questo ha funzionato al meglio:

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

È inoltre possibile aggiungere id, class, o altri attributi in questo modo. Perché non è nell'attributo style="", non conta come CSS e rovina le forme.