Function that accepts a style object.

[-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.

[Peter Michaux]

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

[-Lost]

Peter Michaux wrote:

Hi Lost,

Hello, Mr. Michaux. :)

So you want to convert my-hyphenated-string to myHyphenatedString?

Um, yeah. I believe it's that simple.

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.

Then I would test this against a version that uses split('-') and a
loop and join, for performance if I thought that mattered.

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.

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.

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.

[Peter Michaux]

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?"

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

[-Lost]

Peter Michaux wrote:

>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?"

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.

Well, I figured if any CSS designer was attempting to muddle through
*my* code, then I could at least make it as convenient as possible.

Thereby not forcing them to type something they are not used to.

text-decoration: line-through as opposed to textDecorationLineThrough
for example. In those few rare cases I would rather the CSS author rely
on his or her CSS knowledge to pass style information to Objects that
read and display from a template.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[Peter Michaux]

On Jun 5, 9:56 pm, -Lost <[e-mail]:

Peter Michaux wrote:

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?"

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.

Well, I figured if any CSS designer was attempting to muddle through
*my* code, then I could at least make it as convenient as possible.

Thereby not forcing them to type something they are not used to.

text-decoration: line-through as opposed to textDecorationLineThrough
for example. In those few rare cases I would rather the CSS author rely
on his or her CSS knowledge to pass style information to Objects that
read and display from a template.

This sounds like a bad situation if CSS designers are looking at
JavaScript code.

The JavaScript should be adding, removing or changing CSS class names
in the class attribute of an element. Then the CSS designer can just
stay with the stylesheets and the rules associated with the classes.
The only exception to this rule is when updating styles repeatedly in
an animations (which includes drag and drop.) In this case you would
need hundreds of CSS classes which is just not a good idea.

Peter

[scripts.contact]

On Jun 5, 4:09 pm, Peter Michaux <[e-mail]:

So you want to convert my-hyphenated-string to myHyphenatedString?

I would probably do something like this...

function camelizeStyle(input) {
...
}

or:

function camelizeStyle(input){
return input.replace(/-(.)/g,function(x,y){return y.toUpperCase()})
}

[Peter Michaux]

On Jun 6, 1:40 pm, "scripts.contact" <[e-mail]>
wrote:

On Jun 5, 4:09 pm, Peter Michaux <[e-mail]:

So you want to convert my-hyphenated-string to myHyphenatedString?

I would probably do something like this...

function camelizeStyle(input) {
...
}

or:

function camelizeStyle(input){
return input.replace(/-(.)/g,function(x,y){return y.toUpperCase()})

}

Respect!

Peter

[-Lost]

Peter Michaux wrote:

On Jun 6, 1:40 pm, "scripts.contact" <[e-mail]>
wrote:

>On Jun 5, 4:09 pm, Peter Michaux <[e-mail]:

>>So you want to convert my-hyphenated-string to myHyphenatedString?
I would probably do something like this...
function camelizeStyle(input) {
...
}

or:

function camelizeStyle(input){
return input.replace(/-(.)/g,function(x,y){return y.toUpperCase()})

}

Respect!

Ditto.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[scripts.contact]

Peter Michaux wrote:

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;
}

Or:

function camelizeStyle(input){
return input.replace(/-(.)/g,function(x,y){return y.toUpperCase()})
}

[scripts.contact]

Peter Michaux wrote:

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;
}

Or:

function camelizeStyle(input){
return input.replace(/-(.)/g,function(x,y){return y.toUpperCase()})
}