此处重点介绍一下 toggleClass的应用,如图:
css ↓
extjs ↓
修改之后 ↓
同样是为了实现一个样式切换的效果,之前不知道 toggleClass这个神器的时候还傻傻地用 hasClass + removeClass + addClass 来进行判断操作。。。
一、获取元素(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();//清除这个元素的透明度设置