在dojo中动态更改borderContainer大小

sqxo8psd 于 2022-12-16 发布在 Dojo

关注(0)|答案(2)|浏览(264)

我有下面的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");

dojo

来源：https://stackoverflow.com/questions/47402252/dynamically-change-bordercontainer-size-in-dojo

2条答案

按热度按时间

ctrmrzij1#

尝试以下方法。
获取BorderContainer：

var bc = dijit.byId("borderContainer");

然后为其style属性设置样式set：

bc.set('style',"height: 300px; width: 500px;");

赞(0）回复(0）举报 2022-12-16

mrzz3bfm2#

首先，我建议您切换到现代的Dojo架构
异步加载模块的AMD DOJO：
现在，你可以通过将width和height设置为100 %来设置css样式，并且重要的是将它的父元素设置为100%的高度和宽度（同样适用于body）
否则，您可以使用编程方法：首先将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>

赞(0）回复(0）举报 2022-12-16

我来回答

在dojo中动态更改borderContainer大小

2条答案

相关问题

热门标签

最新问答