Function that accepts a style object.

Discussion in 'Javascript' started by -Lost, Jun 2, 2007.

  1. -Lost

    -Lost Guest

    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.
    -Lost, Jun 2, 2007
    #1
    1. Advertising

  2. 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
    Peter Michaux, Jun 5, 2007
    #2
    1. Advertising

  3. -Lost

    -Lost Guest

    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.
    -Lost, Jun 6, 2007
    #3
  4. > 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
    Peter Michaux, Jun 6, 2007
    #4
  5. -Lost

    -Lost Guest

    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.
    -Lost, Jun 6, 2007
    #5
  6. On Jun 5, 9:56 pm, -Lost <> 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
    Peter Michaux, Jun 6, 2007
    #6
  7. On Jun 5, 4:09 pm, Peter Michaux <> 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()})
    }
    scripts.contact, Jun 6, 2007
    #7
  8. On Jun 6, 1:40 pm, "scripts.contact" <>
    wrote:
    > On Jun 5, 4:09 pm, Peter Michaux <> 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
    Peter Michaux, Jun 6, 2007
    #8
  9. 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, Jun 8, 2007
    #9
  10. 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, Jun 8, 2007
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. winbatch
    Replies:
    5
    Views:
    566
    Winbatch
    Feb 15, 2005
  2. titancipher
    Replies:
    4
    Views:
    509
    titancipher
    Jun 13, 2005
  3. Hoss
    Replies:
    6
    Views:
    524
    Joe Kesselman
    Jan 7, 2007
  4. u.int.32.t
    Replies:
    11
    Views:
    571
    Ian Collins
    Apr 24, 2007
  5. Ken Varn
    Replies:
    0
    Views:
    439
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page