MooTools 1.1, 클래스의 ID를 얻고 스타일을 적용하는 방법

클래스의 id 속성을 가져 와서 해당 ID를 기반으로 스타일을 적용해야합니다.MooTools 1.1, 클래스의 ID를 얻고 스타일을 적용하는 방법

그래서 예를 들어, 클래스 "오타"3 개 목록 항목 각각 하나 개의 ID는 "응용 프로그램"

클래스 "오타"다른 ID가 "application_osx는"이며, 최종 ID가 "application_osx_terminal"입니다 CSS에서 처리하지만 ID 이름을 기반으로 배경 이미지를 지정해야합니다.

그래서 ID가 "application_osx"또는 "someotherid"으로 발생하는 경우 자동으로 나는이에 대한 Mootools의 1.1를 사용하기 위해 노력하고있어

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

이 CSS가 적용된 것이다.

나는 그것이 같을 것이다 생각이 베어

<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 (/ path/to/'+ el.id +'. png) ') }); 내가 잘 이해한다면

는

출처

2010-08-12 09:26:36 tonio

변화 var에 ID = el.get'에 대한 ("ID") ; if (id) el.setStyle (... + id +)'- 정확히 –

get ('id')가 1.2에서 소개되었다고는 생각하지 않지만 http://docs111.mootools.net/을 참조하십시오. Native/Element.js는 전에 getProperty ('id')였습니다 ... – tonio

사실, 질문 주제에서 mootools 버전을 완전히 놓쳤습니다 ... 스타일을 작성하여 DOM 내에서 이러한 ID를 사용하여 요소를 추가하고 제거하는 방식을 보장합니다. 매번 스타일을 지정하기 위해 코드를 실행하지 않아도 자동으로 스타일이 적용됩니다. –

왜 당신은 당신의 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에 있습니다.

약간의 변경 1.11 89,624,458,

클래스 버전 :

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.6 배에서 1.11 클래스를 테스트, 크롬 5, IE7

출처

2010-08-12 10:11:12

그래, 게이브가 원하는 것을 확신하지 못했습니다 ... Btw, 1.1에서 작동하는 코드가 필요합니다 ... – tonio

오, 예 mootools 1.11 (/ 이마를 때리는) –

MooTools 1.1, 클래스의 ID를 얻고 스타일을 적용하는 방법

답변

관련 문제