接受样式对象的函数。 [英] Function that accepts a style object.
问题描述
这与Internet Explorer中的setAttribute问题有关。
我有一个函数接受作为其参数之一的对象
存储样式信息。样式对象特别遵循CSS
样式（不是camelCase JavaScript CSS）。
这在所有浏览器中都非常有效（除了IE），因为我可以只需
连接样式声明，然后通过以下方式设置它们：
new_elem.setAttribute（''style''，style_obj）;
现在，我意识到最好的事情（在IE中）可以直接设置
样式（甚至创建另一个动态的函数
创建CSS类并分配它们）。但是，我唯一可以想到的就是创建一个查找函数，这样就可以了。
font-size变成了fontSize，等等。
然而，在我这样做之前，我错过了什么？可以在
中更轻松地完成吗？我是否可以允许用户传递样式对象，如：{
color：''＃f00''，''font-size''：''2em''}并以某种方式直接设置样式
没有查找功能的IE浏览器？
（对不起，如果这还不是那么清楚。和生病的孩子一起过夜了
，这是我能想到的最好的。）
基本上，我是在正确的轨道上使用查找功能还是我
缺失显而易见的事情？
谢谢你们（还有加尔斯？）。
-
-Lost
删除要通过电子邮件回复的额外单词。不要给我发电子邮件。我是开玩笑的。不，我不是。
This relates to the setAttribute problems in Internet Explorer.
I have a function that accepts as one of its arguments an object that
stores style information. The style object specifically adheres to CSS
styles (not the camelCase JavaScript CSS).
This works wonderfully in all browsers (except IE), because I can simply
concatenate the style declarations then set them in one go via:
new_elem.setAttribute(''style'', style_obj);
Now, I realize the optimal thing (in IE) to do would be to set the
styles directly (or even create another function that dynamically
creates CSS classes and assigns them). However, the only thing I can
think of to achieve that would be to create a lookup function, so that
font-size becomes fontSize, et cetera.
Before I do that however, am I missing something? Could it be done in
an easier fashion? Can I allow the user to pass a style object like: {
color: ''#f00'', ''font-size'': ''2em'' } and somehow set the styles directly
in IE without a lookup function?
(Sorry if this is isn''t that clear. Been up all night with sick kids
and this is the best I can muster.)
Basically, am I on the right track with a lookup function or am I
missing something obvious?
Thanks guys (and gals?).
--
-Lost
Remove the extra words to reply by e-mail. Don''t e-mail me. I am
kidding. No I am not.
推荐答案
你好了，
所以你想转换我的连字符 - 字符串到myHyphenatedString？
我可能会做这样的事情...
函数camelizeStyle（输入）{
if（输入==''类''）{
返回''className'';
}
var c，输出='''';
for（var i = 0; i< input.length; i ++）{
output + =（（c = input.charAt（i ））=='' - ''）？
input.charAt（++ i）.toUpperCase（）：
c;
}
返回输出;
}
var camel = camelizeStyle（''my-hypenated-string''）;
然后我会针对使用split（'' - ''）和
循环并加入的版本测试这个，如果我认为这很重要的话。
当我编写JavaScript时，我总是使用camelCase作为样式。我
从不使用连字符。然后我不必用JavaScript思考两个不同的
版本。
Peter
Hi Lost,
So you want to convert my-hyphenated-string to myHyphenatedString?
I would probably do something like this...
function camelizeStyle(input) {
if (input == ''class'') {
return ''className'';
}
var c, output='''';
for (var i=0; i<input.length; i++) {
output += ((c=input.charAt(i)) == ''-'') ?
input.charAt(++i).toUpperCase() :
c;
}
return output;
}
var camel = camelizeStyle(''my-hypenated-string'');
Then I would test this against a version that uses split(''-'') and a
loop and join, for performance if I thought that mattered.
When I am writing JavaScript I always use camelCase for styles. I
never use hyphen-case. Then I don''t have to think in two different
versions in JavaScript.
Peter
< br> <>
Peter Michaux写道：
Peter Michaux wrote:
Hi Lost,
您好，Michaux先生。 :)
Hello, Mr. Michaux. :)
所以你想将my-hyphenated-string转换为myHyphenatedString？
So you want to convert my-hyphenated-string to myHyphenatedString?
嗯，是的。我相信它就是这么简单。
Um, yeah. I believe it''s that simple.
我可能会做这样的事情......
函数camelizeStyle（输入）{
if（input ==''class''）{
返回''className'';
}
var c，output ='''';
for（var i = 0; i< input.length; i ++）{
output + = （（c = input.charAt（i））=='' - ''）？
input.charAt（++ i）.toUpperCase（）：
c;
}
返回输出;
}
var camel = camelizeStyle（''my- hypenated字符串 ''）;
I would probably do something like this...
function camelizeStyle(input) {
if (input == ''class'') {
return ''className'';
}
var c, output='''';
for (var i=0; i<input.length; i++) {
output += ((c=input.charAt(i)) == ''-'') ?
input.charAt(++i).toUpperCase() :
c;
}
return output;
}
var camel = camelizeStyle(''my-hypenated-string'');
漂亮。绝对比查找函数更好。
Beautiful. Definitely better than a lookup function.
然后我会针对使用split（'' - ''）和
$ b $的版本测试这个b循环和连接，如果我认为重要的表现。
Then I would test this against a version that uses split(''-'') and a
loop and join, for performance if I thought that mattered.
我写了一个非常脏的版本，然后它突然出现在我身上，
谁在乎？这并不是说我会在
a时间转换10,000个样式对象。
在初步测试中，虽然分裂，然后使用数组函数是
a更快。
I wrote a very dirty version of just that, and then it dawned on me,
"Who cares?" It''s not like I will be converting 10,000 style objects at
a time.
In a preliminary test though, split''ing, then using Array functions was
a bit faster.
当我编写JavaScript时，我总是使用camelCase作为样式。我
从不使用连字符。然后我不必在JavaScript中考虑两个不同的
版本。
When I am writing JavaScript I always use camelCase for styles. I
never use hyphen-case. Then I don''t have to think in two different
versions in JavaScript.
你知道，这就是我最初的目标。然后别的东西
恍然大悟，我怎么能期望CSS作者熟悉
JavaScript CSS惯例？
谢谢！
-
-Lost
删除多余的单词以通过电子邮件回复。不要给我发电子邮件。我是开玩笑的。不，我不是。
You know, that was what I was going for at first. Then something else
dawned on me, "How can I expect CSS authors to be familiar with
JavaScript CSS conventions?"
Thanks!
--
-Lost
Remove the extra words to reply by e-mail. Don''t e-mail me. I am
kidding. No I am not.
你知道，这就是我最初的目标。然后别的东西
You know, that was what I was going for at first. Then something else
恍然大悟，我怎么能期望CSS作者熟悉
JavaScript CSS约定？
dawned on me, "How can I expect CSS authors to be familiar with
JavaScript CSS conventions?"
CSS设计器类型的内容最终是什么？在你的JavaScript中处理了
？这对我来说似乎是个红旗。
课程可能有充分的理由。我很好奇。
彼得
How is it that the things a CSS designer type''s ends up being
processed in your JavaScript? That seems like a red flag to me. Of
course there might be a good reason. I''m curious.
Peter
这篇关于接受样式对象的函数。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
