Question

我正在使用Dojo和Javascript来执行以下简单的功能：

找到ID为
更新div样式部分

以下是包含上述意图代码的模块。从主模块调用resize函数。原始div样式设置在主模块上：但是，只要＆＃34;调整大小＆＃34;发生时，主模块会调用此调整大小函数以使用不同的样式进行更新。

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();
    }
  });
});

当我通过浏览器运行程序时，控制台错误说刷新（）不是函数。但是，div正在以正确的样式设置刷新。
如果我删除了node.refresh（）语句，则div不会刷新并显示不正确的样式。当然没有错误。

我研究了这个主题，并找到了一些使用带有DOM节点但不在Dojo上下文中的refresh（），update（）的示例。有没有办法动态刷新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;
}

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

1 个答案: