Question

我需要获取类的id属性并根据该id应用样式。

例如，3个列表项目各有“typo”类，一个id是“application”，另一个id是“application_osx”，最终id是“application_osx_terminal”

类“拼写错误”由CSS处理，但我需要根据ID名称分配背景图像。

因此，如果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>

Answer 1

$$（ '错字'）。每个（函数（EL）{ el.setStyle（'background-image'，'url（/ path / to /'+ el.id +'。png）'） }）;

如果我理解的话，应该做的伎俩...

Answer 2

为什么不能在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);
        }
    }
});

使用：

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

编辑这只是引起了我的注意，你是在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);
        }
    }
});

测试了FF 3.6x，Chromium 5和IE7中的1.11类

MooTools 1.1，如何获取类的id并应用样式

2 个答案: