web-dev-qa-db-fra.com

Création d'un élément de canevas et définition de ses attributs de largeur et de hauteur à l'aide de jQuery

J'essayais juste de faire ce qui suit dans jQuery:

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

Cela fonctionne (en quelque sorte) et génère le balisage suivant:

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

Comme la plupart d'entre vous savent peut-être que les éléments canvas n'aiment pas vraiment les dimensions CSS mais attendent un attribut width et height, donc cette création d'objet a échoué pour moi.

Je sais que je pourrais simplement faire:

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

à la place, mais je me demandais quand même s'il y avait un moyen de dire à jQuery que width et height devraient être traités comme des attributs lors de la création de l'élément via $('element',{attributes}) et non comme CSS?

javascriptjquerycanvashtml
29
m90

jQuery essaie de faire correspondre chaque nom d'attribut avec un nom de fonction jQuery. Les fonctions correspondantes sont appelées.

width et height sont des fonctions jQuery, donc votre code d'origine est équivalent à ceci:

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

largeur (valeur) et hauteur (valeur) fonctions définies [~ # ~] css [~ # ~] largeur et hauteur d'un élément.

Ligne de code source jQuery pertinente ( https://github.com/jquery/jquery/blob/master/src/attributes.js#L308 )

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

attrFn définition d'objet ( 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);

Preuve

26
thecodeparadox

Vous pouvez utiliser comme ça

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

Changez le cas et essayez

10
Ranganadh Paramkusam

Il semble que changer la casse de n'importe quelle lettre empêchera jQuery de convertir l'attribut en style, donc ranganadh est probablement tombé sur une faille involontaire dans jQuery où il vérifie l'attribut par rapport aux styles, mais pas la casse.

Cela semble par exemple fonctionner aussi bien ??

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

Les attributs JS natifs ne sont pas convertis en styles, et j'irais probablement avec la solution ci-dessous pour m'assurer qu'elle est "à l'épreuve du temps" (setAttribute() semble bien fonctionner également):

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

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

J'ai trouvé que cela fonctionnait le mieux:

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

Vous pouvez également ajouter id, class ou d'autres attributs de cette façon. Parce qu'il n'est pas dans le style="" attribut, il ne compte pas comme CSS et gâche vos formes.

1
Superhq 2000

Edit: C'est plus lent, voir les commentaires ci-dessous.

Ce sera probablement plus rapide que toute solution de contournement publiée ici:

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

Un peu moins sophistiqué, mais c'est essentiellement la même chose avec moins d'appels de fonction.

0
Mahn