MooTools 1.1, как получить идентификатор класса и применить стиль - PullRequest
Новая
       24

MooTools 1.1, как получить идентификатор класса и применить стиль

0 голосов
/ 11 августа 2010

Мне нужно получить атрибут id класса и применить стиль на основе этого идентификатора.

Так, например, 3 элемента списка, каждый с классом "typo", один идентификатор - "application",другой идентификатор - «application_osx», а окончательный идентификатор - «application_osx_terminal»

Класс «опечатка» обрабатывается CSS, но мне нужно назначить фоновое изображение на основе имени идентификатора.

Так что, если id будет «application_osx» или «someotherid», к нему автоматически будет применен этот CSS 

#application_osx { background: url(/path/to/image/application_osx.png) }
#someotherid { background: url(/path/to/image/someotherid.png) }

Я пытаюсь использовать MooTools 1.1 для этого.

Полагаю, это будет выглядеть так: 

    <html>
    <head>
    <title>Blah</title>
    <script src="path/to/mootools.js"></script>
    <script>
    A SCRIPT THAT PRINTS OUT:
    #application_osx { background: url(/path/to/image/application_osx.png) }
    #someotherid { background: url(/path/to/image/someotherid.png) }
    BASED ON THE CLASS "TYPO"
    </script>
    </head>
    <body>
    <ul>
    <li id="application_osx" class="typo">Application OSX</li>
    <li id="someotherid" class="typo">Someotherid</li>
    </ul>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 12 августа 2010

почему вы не можете определить правила в вашем CSS-файле?если вам нужно динамически создавать правила и добавлять к заголовку документа, вам нужно что-то вроде

для 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 только что обратил мое внимание, что вы на mootools 1.11, поэтому

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

версия класса для 1.11 с небольшими изменениями: 

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);
        }
    }
});

протестировал 1.11 класс в FF 3.6x, Chromium 5 и IE7

0 голосов
/ 12 августа 2010

$$ ('. Typo'). Each (function (el) {el.setStyle ('background-image', 'url (/ path / to /' + el.id + '. Png)')});

Должен делать свое дело, если я хорошо понимаю ...

...