ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作

此处重点介绍一下 toggleClass的应用，如图：

css ↓



extjs ↓



修改之后 ↓



同样是为了实现一个样式切换的效果，之前不知道 toggleClass这个神器的时候还傻傻地用 hasClass + removeClass + addClass 来进行判断操作。。。

好了，后面的内容转自ExtJs使用总结(非常详细)

一、获取元素（Getting Elements） 

1.Ext.get 
var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 

2. Ext.fly 
var el = Ext.fly('myElementId')//不需要缓存。 
注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

 

3.Ext.getDom 
var elDom = Ext.getDom('elId'); // 依据id来查dom节点 
var elDom1 = Ext.getDom(elDom);// 依据dom节点来查dom节点 

二、CSS元素 
4.addClass 
Ext.fly('elId').addClass('myCls');// 加入元素的'myCls'的样式 

5.radioClass 
Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。

 

6.removeClass 
Ext.fly('elId').removeClass('myCls');// 移除元素的样式 

7.toggleClass 
Ext.fly('elId').toggleClass('myCls'); // 加入样式 
Ext.fly('elId').toggleClass('myCls'); // 移除样式 
Ext.fly('elId').toggleClass('myCls'); // 再加入样式 

8.hasClass 
if (Ext.fly('elId').hasClass('myCls')){//判断是否已加上这个样式 
// 是有样式的…… 
} 

9.replaceClass 
Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式 



10.getStyle 
var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。 
var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。 

11.setStyle 
Ext.fly('elId').setStyle({ 
display : 'block', 
overflow : 'hidden', 
cursor : 'pointer' 

});//设置元素的样式，也可以用一个对象参数包含多个样式。 

12.getColor 
Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色 

13.setOpacity 
Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。 

14.clearOpacity 
Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置