框架下元素className操作的方法汇总

• JS原生

parent.className = parent.className + " newClass";

• Jquery

$(selector).addClass("new1 new2");

• react下

// 方法一 ES6的模板字符串
className = {`title ${condition ? "active" : ""}`};

// 方法二 数组的join(" ")，将数组转化为字符串;
className = {["title", condition ? "active" : null].join(" ")}

• angularJS下

<div ng-class="expression"> </div>

通过上边的 expression 可以动态为 div 添加或者删除类名，expression 可以是 所在$scope 下的变量名，也可以是函数，函数表达式，返回值作为类名。此外对于比较简单的逻辑：还可以通过以下方案：

// scope挂载一个名为key的boolean类型属性
ng-class="{true : 'checker disabled',false : 'checker' }[key]"
// 或者同样需要scope挂载一个名为key的boolean类型属性，但是写法不同
ng-class="{'checker disabled' : key, 'checker' : !key}"