Question

我有以下borderContainer，其大小是硬编码的。我试图根据屏幕分辨率动态更改它：

<div id="border1" dojoType="dijit.layout.BorderContainer" 
     style="width: 1010px; height: 500px">
    ...
</div>

我尝试执行以下操作以动态更改它，但它似乎无法正常工作

dojo.require("dojo/window");
var bc = dijit.byId("borderContainer");   
dojo.setStyle(bc.domNode, "height", screen.height+"px");
dojo.setStyle(bc.domNode, "width", screen.width+"px");

Answer 1

试试这个

df.m.apply(set(v).issubset).sum()

Answer 2

首先，我建议您切换到现代道场建筑 AMD DOJO以异步方式加载模块：

现在，您可以通过将width和height设置为100％来设置仅css样式，而重要这里的事情是设置它的父级100％的高度和宽度（也适用于身体）

否则你可以使用程序化方法：首先将body的高度和宽度设置为100％当窗口调整大小时将边框容器节点设置为100％。

require([ "dojo/on","dojo/dom-style", "dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],function(On, domStyle,ready,registry,BorderContainer,ContentPane){
	ready(function(){
    var borderContainer = registry.byId("bc");
    bcDomNode = borderContainer.domNode;
    
    On(window,"resize",function(e){
      domStyle.set(bcDomNode,'width','100%');
      domStyle.set(bcDomNode,'height','100%');
    	
    })
    
    setTimeout(function(){
      domStyle.set(bcDomNode,'width','100%');
      domStyle.set(bcDomNode,'height','100%');
    },3000)
    
  })
  
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script>
    dojoConfig= {
        parseOnLoad: true,
        async: true
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="bc" data-dojo-type="dijit/layout/BorderContainer" style="width: 1010px; height: 500px">
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">center</div>
  </div>
</body>

在dojo中动态更改borderContainer大小

2 个答案: