ansaurus

Question

MooTools 1.1, how to get id of class and apply a style

Answer 1

A:

Hi,

$$('.typo').each(function(el){
  el.setStyle('background-image', 'url(/path/to/'+el.id+'.png)')
});

Should do the trick, if I understand well…

tonio 2010-08-12 09:26:36

change to `var id = el.get("id"); if (id) el.setStyle(... +id+)` - although i don't think he meant that exactly

Dimitar Christoff 2010-08-12 09:53:09

get('id') has been introduced in 1.2, see http://docs111.mootools.net/Native/Element.js , was getProperty('id') before…

tonio 2010-08-12 11:22:34

true, i totally missed the mootools version in the question topic... by creating a style you ensure that future adding and removing of elements with these ids within the DOM will be styled automatically as opposed to having to run your code to style them every time.

Dimitar Christoff 2010-08-12 12:11:19

Answer 2

A:

why can't you define the rules in your css file? if you need to dynamically produce rules and append to the document head then you need something like this

for mootools 1.2.x http://www.jsfiddle.net/dimitar/G5ywF/1/

var StyleWriter = new Class({
    // css classes on the fly, based on by Aaaron Newton's version
    createStyle: function(css, id) {
        try {
            if (document.id(id) && id) return;

            var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElement('head'));
            if (Browser.Engine.trident)
                style.styleSheet.cssText = css;
            else
                style.set('text', css);

        } catch(e) {
            console.log("failed:", e);
        }
    }
});

use:

new StyleWriter().createStyle("#rule { blah; }\n#rule2 { blah... }\n", "mystyles");

edit it was just brought to my attention you are on mootools 1.11 so

http://www.jsfiddle.net/G5ywF/4/

class version for 1.11 with slight changes:

var StyleWriter = new Class({
    // css classes on the fly, based on by Aaaron Newton's version
    createStyle: function(css, id) {
        try {
            if ($(id) && id) return;

            var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElement('head'));


            if (window.ie)
                style.styleSheet.cssText = css;
            else
                style.setHTML(css);

        } catch(e) {
            console.log("failed:", e.message);
        }
    }
});

tested the 1.11 class in FF 3.6x, Chromium 5 and IE7

Dimitar Christoff 2010-08-12 10:11:12

Yeah, was unsure about what Gabe want…Btw, your code will need some fixes to work with 1.1…

tonio 2010-08-12 11:25:55

oh yeah mootools 1.11 (/me slaps forehead)

Dimitar Christoff 2010-08-12 11:59:51

ansaurus

tags:

views:

answers:

MooTools 1.1, how to get id of class and apply a style

related questions