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

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

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

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

Так, если идентификатор случается «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>

источник

2010-08-11 Gabe

$$ ('опечатка '). Каждая (функция (эл) { el.setStyle (' Фоновое изображение', «URL (/ путь/в/'+ el.id +'. png) ') });

Если сделать трюк, если я хорошо понимаю ...

источник

2010-08-12 09:26:36 tonio

изменения в 'вар ID = el.get ("ID") ; if (id) el.setStyle (... + id +) '- хотя я не думаю, что он имел в виду, что точно –

get ('id') введен в 1.2, см. http://docs111.mootools.net/ Native/Element.js, был getProperty ('id') до ... – tonio

true, я полностью пропустил версию mootools в теме вопроса ... создав стиль, который вы гарантируете, что в будущем добавление и удаление элементов с этими идентификаторами в DOM будут автоматически создаваться автоматически, в отличие от необходимости запускать свой код, чтобы каждый раз их стиль. –

почему вы не можете определить правила в файле 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); 
     } 
    } 
});

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

источник

2010-08-12 10:11:12

Да, не был уверен в том, чего хочет Гейб ... Кстати, ваш код потребует некоторых исправлений для работы с 1.1 ... – tonio

oh yeah mootools 1.11 (/ me slaps thebhead) –

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

ответ

Смежные вопросы