Создание элемента холста и установка его атрибутов ширины и высоты с помощью 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, но ожидают атрибут width и height, поэтому создание этого объекта не удалось для меня.

Я знаю, что могу просто сделать:

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

вместо этого, но мне было интересно, однако, если есть какой-либо способ сообщить jQuery, что width и height следует рассматривать как атрибуты при создании элемента через $('element',{attributes}), а не как CSS?

Ответы

Ответ 1

jQuery пытается сопоставить каждое имя атрибута с именем функции jQuery. Вызываются совпадающие функции.

width и height являются функциями jQuery, поэтому ваш исходный код эквивалентен этому:

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

width (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
},

Ответ 2

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

Доказательство

Ответ 3

Вы можете использовать это как

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

Измените случай и попробуйте

Ответ 4

Кажется, что изменение случая любой буквы не позволит 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);

Ответ 5

Я обнаружил, что это сработало лучше всего:

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

Вы также можете добавить id, class или другие атрибуты. Поскольку он не находится в атрибуте style="", он не считается CSS и испортит ваши фигуры.

Ответ 6

Изменить: Это медленнее, см. комментарии ниже.

Это, вероятно, будет быстрее, чем любое обходное решение, опубликованное здесь:

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

Чуть менее привлекательнее, но в то же время он тем же самым при меньших вызовах функций.