Function that accepts a style object.

L

-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?).
 
P

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
 
L

-Lost

Peter said:

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!
 
P

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
 
L

-Lost

Peter said:
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.
 
P

Peter Michaux

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
 
S

scripts.contact

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()})
}
 
S

scripts.contact

Peter said:
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()})
}
 
S

scripts.contact

Peter said:
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()})
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top