Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Function that accepts a style object.

Reply
Thread Tools

Function that accepts a style object.

 
 
-Lost
Guest
Posts: n/a
 
      06-02-2007
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.
 
Reply With Quote
 
 
 
 
Peter Michaux
Guest
Posts: n/a
 
      06-05-2007
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

 
Reply With Quote
 
 
 
 
-Lost
Guest
Posts: n/a
 
      06-06-2007
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.
 
Reply With Quote
 
Peter Michaux
Guest
Posts: n/a
 
      06-06-2007
> 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

 
Reply With Quote
 
-Lost
Guest
Posts: n/a
 
      06-06-2007
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.
 
Reply With Quote
 
Peter Michaux
Guest
Posts: n/a
 
      06-06-2007
On Jun 5, 9:56 pm, -Lost <(E-Mail Removed)> wrote:
> 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

 
Reply With Quote
 
scripts.contact
Guest
Posts: n/a
 
      06-06-2007
On Jun 5, 4:09 pm, Peter Michaux <(E-Mail Removed)> wrote:
> 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()})
}

 
Reply With Quote
 
Peter Michaux
Guest
Posts: n/a
 
      06-06-2007
On Jun 6, 1:40 pm, "scripts.contact" <(E-Mail Removed)>
wrote:
> On Jun 5, 4:09 pm, Peter Michaux <(E-Mail Removed)> wrote:
>
> > 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

 
Reply With Quote
 
scripts.contact
Guest
Posts: n/a
 
      06-08-2007
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()})
}

 
Reply With Quote
 
scripts.contact
Guest
Posts: n/a
 
      06-08-2007
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()})
}

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem in running a basic code in python 3.3.0 that includes HTML file Satabdi Mukherjee Python 1 04-04-2013 07:48 PM
template function that accepts const and non-const u.int.32.t C++ 11 04-24-2007 03:05 AM
RemoveNodes function - accepts XPath Hoss XML 6 01-07-2007 10:10 PM
Making a class that accepts a user-defined STL coparison function titancipher C++ 4 06-13-2005 07:51 AM
How do I write a function that accepts a 'printf' type parameter? winbatch C++ 5 02-15-2005 04:34 AM



Advertisments