使用Dojo，我该如何动态刷新div？

Question

我使用Dojo和JavaScript来执行一个简单的功能：

• 找到一定的DIV ID为
• 更新该div样式部分

下面是一个包含代码的模块上述意图。调整大小功能从主模块调用。原始div风格设置在主模块上：但是，无论何时出现“调整大小”，主模块都会调用此大小调整功能以不同的样式进行更新。

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/_base/html' 
], 
function(declare, query, html) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     html.setStyle (somenode, "left", "10px"); 
     html.setStyle (somenode, "right", "auto"); 
     html.setStyle (somenode, "bottom", "20px"); 
     html.setStyle (somenode, "top", "auto"); 
     html.setStyle (somenode, "position", "absolute"); 
     somenode.refresh(); 
    } 
    }); 
}); 

1. 当我通过浏览器运行程序，控制台错误，指出刷新（）是不是一个函数。但是，正确的样式设置刷新了div。

2. 如果我删除了node.refresh（）语句，则div不会刷新并显示不正确的样式。当然没有错误。

我研究了这个主题，发现了一些使用refresh（），update（）与DOM节点但不在Dojo上下文中的例子。有没有办法动态刷新DOM节点而不会出错？

感谢，

驰

Answer 1

没有必要使用refresh既不update。 而是使用dojo/dom-style如下所示：

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/dom-style' 
], 
function(declare, query, domStyle) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     domStyle.set(somenode, { 
      left: '10px', 
      right: 'auto', 
      bottom: '20px', 
      top: 'auto', 
      position: 'absolute' 
     }); 
    } 
    }); 
}); 

一个更好的办法是切换，而不是与内联样式打一个类名：

define(['dojo/_base/declare', 
'dojo/query', 
'dojo/dom-class' 
], 
function(declare, query, domClass) { 
    return declare([], { 
    baseClass: 'jimu-panel jimu-bottom-panel', 

    resize: function() { 
     var someNode = query("#widgets_panel") 
     if (someNode != null) { 
     // found it 
     this._setPosition(someNode); 
     } else { 
     console.error ("Cannot find the node"); 
     }; 
    }, 

    _setPosition: function (somenode) { 
     // set the style 
     // refresh the node 
     domClass.add(somenode, 'newDivStyle'); 
    } 
    }); 
}); 

在CSS文件，创建相应的类：

.newDivStyle { 
     left: 10px; 
     right: auto; 
     bottom: 20px; 
     top: auto; 
     position: absolute; 
}