2012-03-29 2 views
0

Dojo에서 이상한 문제가 있습니다. 내 domStyle.set이 의도 한대로 작동하지 않습니다. Dom 노드에 스타일을 설정하는 올바른 방법이라는 것은 당연한 것입니다.domstyle.set dojo에서 작동하지 않습니다.

다음은 DOM 노드를 설명하는 HTML 스 니펫입니다.

<div class="edgePanel" data-dojo-type="dijit.layout.BorderContainer" style="display: table-cell; min- height:70%;" data-dojo-props="region: 'center'"> 
     <div style="display: table; width:100%; height: 100%"> 
      <div style="display: table-row"> 
        <div style="display: table-cell; vertical-align: middle; text-align: center"> 
         <div id="da" name="da" style="background-color: #FFFFFF;width:300px;height:250px; display: inline-block; vertical-align: middle;"> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

da 노드는 도면 영역 노드입니다. 이 자바 스크립트 파일의 코드를 사용하여 드로잉 영역 노드의 크기를 변경하려고합니다. 디버그 지점을 설정했고 domStyle.set 위치로 들어갑니다. 그래서, 내 절대적으로 어리 석음 : 자사하지 않는 경우

define(['dojo/_base/declare','../util/XMLLoader',"dojo/query",'dojo/_base/lang', 
    'dijit/registry','dojo/on',"dojo/dom-style", 'dojo/domReady!'], function (declare,XMLLoader,query,lang,registry,on,domStyle) { 

return declare(null, { 
    setup : function(){ 
     var loader = new XMLLoader(); 
     loader.load("example.xml","editor"); 
     this.resizeDrawingArea(); 
     var selector = query("#sizeSelect")[0]; 
     on(selector,"change",lang.hitch(this,"resizeDrawingArea")); 
     // 
    }, 
    resizeDrawingArea : function (evt){ 
     var drawArea = query("#da"); 
     var selector = query("#sizeSelect")[0]; 
     switch(selector.value) 
     { 
      case "MPU": 
       //drawArea.style("width","300px","height","250px"); 
       domStyle.set(drawArea,"width","300px"); 
       break; 
      case "LDR": 
       domStyle.set(drawArea,"width","728px"); 
       break; 
      case "SKY": 
       break; 
      case "MSTR": 
       break; 
      case "LMPU": 
       break; 
      case "STD": 
       break; 
      case "WSKY": 
       break; 
      case "SQR": 
       break; 
      case "SSQR": 
       break; 
     } 
    } 


    }); 
}); 

내 생각은 다른 크기 사이에 교환하는 "선택"목록을 사용하는 것입니다. 그것은 어떻게 든 예상보다 쉽게 ​​작동하지 않는 것 같습니다.

내가 여기서 잘못하고있는 것이 있습니까? 필요한 경우 더 많은 정보를 제공하게되어 기쁩니다. 여기에서 dojo 1.7.2 사용.

답변

6

'idda'와 같은 노드 ID를 지정하더라도 dojo.query는 dom 노드 자체를 반환하지 않습니다. 항상 NodeList를 반환합니다. 그래서 아래와 같이 코드를 변경해야합니다.

domStyle.set(drawArea[0],"width","300px"); 

또는 dojo.query를 사용하는 대신 dojo.byId를 사용하여 dom 노드에 직접 액세스 할 수 있습니다.

0

있는 NodeList는 sideeffect으로 한 줄에 결과의 모든 노드에 등 스타일을 적용하거나 추가/클래스를 제거 할 수 있습니다 등 체인 방식 domClass domStyle 자체를 확장

dojo.query("selector", beneathThisNode).style({ width: '300px' }); 

또는

dojo.query("selector").forEach(function(node) { domStyle.set(node, "width", "300px"): }) 

또는 일부 조건 만 충족 될 때까지 조건부가 충족되지 않을 때까지

dojo.query("selector").some(function(node) { 
    if(! dojo.attr(node, "lookfor")) 
    return false; 
    domStyle.set(node, "width", "300px"): 
}) 
관련 문제