Javascript 使用 jQuery 创建画布元素并设置其宽度和高度属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10433046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a canvas element and setting its width and height attributes using jQuery
提问by m90
I was just trying to do the following in jQuery:
我只是想在 jQuery 中执行以下操作：
var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'});
$(body).append(newCanvas);
This is working (kind of) and generates the following markup:
这是有效的（有点）并生成以下标记：
<canvas style="width:100px; height:200px;" class="radHuh"></canvas>
As most of you might know canvaselements don't really like CSS dimensions but expect a width and height attribute, so this object creation failed for me.
正如你们大多数人可能知道canvas元素并不真正喜欢 CSS 尺寸，但需要宽度和高度属性，所以这个对象创建对我来说失败了。
I do know I could just do:
我知道我可以这样做：
var newCanvas = $('<canvas/>',{'class':'radHuh'}).attr({'width':100,'height':200});
instead, but I was just wondering nonetheless if there is any way of telling jQuery that widthand heightshould be treated as attributes when creating the element via $('element',{attributes})and not as CSS?
相反，但我只是仍然不知道是否有告诉jQuery的是什么方法width，并height应通过创建元素时被视为属性，$('element',{attributes})而不是CSS？
回答by Juan Mellado
jQuery try to match each attribute name with a jQuery function name. Matched functions are called.
jQuery 尝试将每个属性名称与 jQuery 函数名称匹配。匹配的函数被调用。
widthand heightare jQuery functions, so your original code is equivalent to this:
width和height是 jQuery 函数，因此您的原始代码等效于：
var newCanvas =
$('<canvas/>',{'class':'radHuh'})
.width(100)
.height(100);
width(value)and height(value)functions set CSSwidth and height of an element.
width(value)和height(value)函数设置元素的CSS宽度和高度。
Relevant jQuery source code line (https://github.com/jquery/jquery/blob/master/src/attributes.js#L308)
相关的 jQuery 源代码行（https://github.com/jquery/jquery/blob/master/src/attributes.js#L308）
if ( pass && name in jQuery.attrFn ) {
attrFnobject definition (https://github.com/jquery/jquery/blob/master/src/attributes.js#L288):
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
},
回答by thecodeparadox
回答by Ranganadh Paramkusam
You can use like this
你可以这样使用
$('<canvas/>',{'class':'radHuh','Width':100,'Height':200});
Change the case and try
改变案例并尝试
回答by adeneo
It seem like changing the case of any letter will prevent jQuery from converting the attribute to a style, so ranganadh probably stumbled on to some unintended flaw in jQuery where it checks the attribute against styles, but not case-insensitive.
似乎改变任何字母的大小写都会阻止 jQuery 将属性转换为样式，因此 ranganadh 可能偶然发现了 jQuery 中的一些意外缺陷，它根据样式检查属性，但不区分大小写。
This for instance seems to work aswell ??
例如，这似乎也有效？？
var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100});
$('body').append(newCanvas);???
The native JS attributes are not converted to styles, and I'd probably go with the below solution to make sure it's "future proof" ( setAttribute()seems to work fine aswell ) :
本机 JS 属性不会转换为样式，我可能会使用以下解决方案以确保它是“面向未来的”（setAttribute()似乎也能正常工作）：
var newCanvas = $('<canvas/>');
newCanvas[0].height = 200;
newCanvas[0].width = 100;
$('body').append(newCanvas);???
回答by Superhq 2000
I found that this worked the best:
我发现这效果最好：
$('<canvas height="50px" width="50px"/>')
You can also add id, class, or other attributes this way. Because it is not in the style=""attribute, it does not count as CSS and mess up your shapes.
您还可以通过这种方式添加id、class或其他属性。因为它不在style=""属性中，所以它不算作 CSS 并弄乱您的形状。
回答by Mahn
Edit:This is slower, see comments below.
编辑：这比较慢，请参阅下面的评论。
This will likely be faster than any workaround posted here:
这可能比此处发布的任何解决方法都快：
var attributes = {width: 100, height: 100, class: "whatever"};
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body);
Slightly less fancier, but it's esentially the same with less function calls.
稍微不那么花哨，但本质上与更少的函数调用相同。
