#970 bug
zeno

setStyle() fails to set -moz-based styles

Reported by zeno | December 28th, 2009 @ 05:26 PM

the setStyle() method doesn't seem to work when setting -moz-based styles (like "-moz-box-shadow").

The following code does NOT WORK in Firefox:

myElement.setStyle({"-moz-box-shadow":"#000 0 2px 20px"});

While this WORKS in Safari/WebKit:

myElement.setStyle({"-webkit-box-shadow":"#000 0 2px 20px"});

I looked at setStyle()'s implementation, and it seems to be based on the "myElement.style[property]=value"-way of setting style. I can confirm that myElement.style["-moz-box-shadow"]="#000 0 2px 20px" doesn't work. I did some tests and it appears that the following js-pure code actually works:

myElement.style.setProperty("-moz-box-shadow","#000 0 2px 20px","");

An other interesting fact is that the jQuery equivalent of setStyle() works for both -webkit AND -moz styles:

myElement.css({"-webkit-box-shadow":"#000 0 2px 20px"});
myElement.css({"-moz-box-shadow":"#000 0 2px 20px"});

Comments and changes to this ticket

  • zeno

    zeno December 28th, 2009 @ 06:58 PM

    So a fix might be to add the following line to setStyle():

    else if (property.startsWith('-moz')) element.style.setProperty(property, styles[property],"");
    

    I only tested it with -moz-box-shadow (we should test it with other -moz properties too, like -moz-border-radius, etc)

    Here is the full "for" loop of the setStyle() method:

        for (var property in styles)
          if (property == 'opacity') element.setOpacity(styles[property]);
          else if (property.startsWith('-moz')) element.style.setProperty(property, styles[property],"");
          else
            elementStyle[(property == 'float' || property == 'cssFloat') ?
              (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
                property] = styles[property];
    
  • Juriy Zaytsev

    Juriy Zaytsev December 28th, 2009 @ 07:54 PM

    But setting "MozBoxShadow" (camelcased version) works, right?

  • zeno

    zeno December 29th, 2009 @ 01:35 AM

    Holy crap, you're right!
    I had tried the camelcase version but with a lowercase "m" -> "mozBoxShadow" (and that didn't work).
    I totally missed the use of uppercase initial in camelcased properties...

  • Tobie Langel

    Tobie Langel December 29th, 2009 @ 02:33 AM

    • Tag cleared.

    Strictly speaking it's not an initial it follows an initial - though, hence the uppercase.

  • zeno

    zeno December 29th, 2009 @ 09:44 AM

    True :-)

    Is this documented anywhere?

  • Tisho Georgiev

    Tisho Georgiev March 1st, 2010 @ 02:48 PM

    • Tag set to section:dom
    • State changed from “new” to “bug”
  • Mark Lewis

    Mark Lewis November 19th, 2012 @ 11:49 PM

    • Importance changed from “” to “Low”

    getStyle uses normalizeStyleName(style) (or style.camelize() in earlier versions of Prototype), so it works if you use either the hyphenated form or the camelCase form of the CSS property.

    setStyle does not, so you must provide the camelCase form. This inconsistency appears to be the root of the issue.

  • Jason Westbrook

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages