This project is archived and is in readonly mode.

#841 ✓invalid
Yorick Sijsling

get/setProperty('class') on SVGElements not working

Reported by Yorick Sijsling | January 31st, 2010 @ 11:46 PM | in 1.3.0 rc2 (closed)

I am executing the following script:

el.getProperty('class');
Because it is explicitly added to a list of exceptiosn this will internally boil down to:
el['className']

For normal HTMLElement's this will just be a string. But for SVGElement's this is an SVGAnimatedString object. This same oddity also breaks addClass, removeClass, hasClass and getElements/$$ (as described in #526).

I would suggest removing the exception for the 'class' for all browsers except IE. As far as i know IE is the only browser which has trouble with el.getAttribute('class').

I couldn't progress without these issues solved so i implemented a fix in the uncompressed mootools 1.2.4.

Fix for Element.getProperty and Element.setProperty:

1686c1686
<    'class': 'className',
>    'class': (Browser.Engine.trident ? 'className' : undefined),

Fix for Element.hasClass:

1801c1801
<        return this.className.contains(className, ' ');
>         return (this.getProperty('class') && this.getProperty('class').contains(className, ' '));

Fix for Element.addClass:

1805c1805
<        if (!this.hasClass(className)) this.className = (this.className + ' ' + className).clean();
>         if (!this.hasClass(className)) this.setProperty('class', (this.getProperty('class') + ' ' + className).clean());

Fix for Element.removeClass:

1810c1810,1811
<        this.className = this.className.replace(new RegExp('(^|\s)' + className + '(?:\s|$)'), '$1');
>        if (prop = this.getProperty('class'))
>            this.setProperty('class', prop.replace(new RegExp('(^|\s)' + className + '(?:\s|$)'), '$1'));

Fix for Selectors.Filters.byClass (and #526):

2934,2935c2935,2936
<    byClass: function(self, klass){
<        return (self.className && self.className.contains && self.className.contains(klass, ' '));
>    byClass: function(self, className){
>        return self.hasClass(className);

This is all tested with firefox and safari on mac. I don't have IE available at the moment but it should work.

Comments and changes to this ticket

Create your profile

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

Shared Ticket Bins

Referenced by

Pages