使用 dojo 更改 <div> 的 CSS class

Question

我想根据 if 语句更改元素的 CSS class。

这是我的：

HTML

<div data-dojo-attach-point="waitIcon" class="rightNode">

CSS

.rightNode{
  float: right;
  height: 75px;
  width: 60px;
  margin-top: 20px;
}
.noWaitIcon{
  float: right;
  height: 75px;
  width: 60px;
  margin-top: 34px;
}

JS

if (value == 0){
     domClass.remove(this.waitIcon, "rightNode");
     domClass.add(this.waitIcon, "noWaitIcon");
else{
     domClass.remove(this.waitIcon, "noWaitIcon");
     domClass.add(this.waitIcon, "rightNode");
}

Answer 1

当您创建基于模板的小部件时，data-dojo-attach-point 属性有效。

很可能 this 没有指代正确的对象。

无论如何，这是 dom-class 的 jsfiddle 有效。

require( [
    'dojo/dom',
    'dojo/dom-class',
    'dojo/domReady!'
], function(dom, domClass) {
    function swapColor(  ){

      if (value == 0){

        domClass.remove('node', 'red');
        domClass.add('node', 'green');
        value = 1;
      }
      else{

        domClass.remove('node', 'green');
        domClass.add('node', 'red');
        value = 0;
      }


    }
    value = 0;

    dom.byId("btn").onclick = swapColor;


});

使用 dojo 更改 <div> 的 CSS class

Change CSS class of a <div> using dojo

javascript

html

css

dojo

frontend