[英]Creating a canvas element and setting its width and height attributes using jQuery
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 canvas
elements 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 width
and height
should be treated as attributes when creating the element via $('element',{attributes})
and not as CSS? 相反,但我只是想知道,如果有任何方式告诉jQuery在通过
$('element',{attributes})
而不是CSS创建元素时应将width
和height
视为属性?
jQuery try to match each attribute name with a jQuery function name. jQuery尝试将每个属性名称与jQuery函数名称匹配。 Matched functions are called.
匹配函数被调用。
width
and height
are 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 CSS width 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 ) {
attrFn
object 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
},
You can use like this 你可以像这样使用
$('<canvas/>',{'class':'radHuh','Width':100,'Height':200});
Change the case and try 改变案例并尝试
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);
I found that this worked the best: 我发现这是最好的:
$('<canvas height="50px" width="50px"/>')
You can also add id
, class
, or other attributes this way. 您也可以通过这种方式添加
id
, class
或其他属性。 Because it is not in the style=""
attribute, it does not count as CSS and mess up your shapes. 因为它不在
style=""
属性中,所以它不算作CSS并弄乱你的形状。
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. 略微不那么漂亮,但它在功能调用较少的情况下基本相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.