用dojo实现动态更换样式

以下几个例子，个人觉得很有用，希望能看见的你们也能有用：

<script type="text/javascript">

dojo.require("dojo.lang.common");
dojo.require("dojo.event.common");
dojo.require("dojo.html.style");
dojo.require("dojo.string.extras");
dojo.require("dojo.collections.ArrayList");
function initPageStyle()
{
    initInputElementStyle();
}
/*
初始化所有input标签的样式
*/
function initInputElementStyle()
{
    var inputElements=document.getElementsByTagName("input");  //初始化标签
    if(inputElements)
    {  
        for(var i=0;i<inputElements.length;i++)
        {
            var inputElement=inputElements.item(i);
            if(dojo.html.hasAttribute(inputElement,"type"))    //属性对比
            {
                var typeAttr=dojo.html.getAttribute(inputElement,"type");  
                var lowerCaseTypeAttr=typeAttr.toLowerCase();
                if(lowerCaseTypeAttr=="text")
                {
                    initTextFieldStyle(inputElement);  //对text文本做编辑
                }
              else if((lowerCaseTypeAttr=="submit")||(lowerCaseTypeAttr=="reset")||(lowerCaseTypeAttr=="button"))
              {
                   initSimpleButtonStyle(inputElement);  //对button做编辑
               }

            }
        }

    }
}
/*
初始化所有text标签的样式
*/
function initTextFieldStyle(textField)
{
    if(textField)
    {
        if(!dojo.html.hasAttribute(textField,"class"))
            {
                dojo.html.addClass(textField,"TextBox");  //添加属性
            }
           
            var classNames=dojo.html.getClasses(textField);
           
            var classNameArray=new dojo.collections.ArrayList(classNames);
            classNameArray.forEach(
                function(item){
                    if(dojo.lang.isString(item))
                    {
                        addFocusCssStyle(textField,item,item+"Focused");  //添加焦点
                        addBlurCssStyle(textField,item,item+"Focused");
                    }
                }
            );
    }
}
/*
初始化所有简单button标签的样式
*/
function initSimpleButtonStyle(buttonElement)
{
    if(buttonElement)
    {
        if(!dojo.html.hasAttribute(buttonElement,"class"))
            {
                dojo.html.addClass(buttonElement,"Button");
            }
            var buttonClassNames=dojo.html.getClasses(buttonElement);
           
            var buttonClassNameArray=new dojo.collections.ArrayList(buttonClassNames);
            buttonClassNameArray.forEach(
                function(item){
                    if(dojo.lang.isString(item))
                    {
                        addMouseOverCssStyle(buttonElement,item,item+"Hover");  //添加聚焦hover时间，类是css伪类
                        addMouseOutCssStyle(buttonElement,item,item+"Hover");
                    }
                }
            );
    }
}
/*
添加onblur事件下的样式
*/
function addBlurCssStyle(element,blurCssClassName,focusCssClassName)
{
    if(element)
    {
        var blurFunc={
            doBlur:function(){
                dojo.html.replaceClass(element,blurCssClassName,focusCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onblur",blurFunc,"doBlur");
    }
}
/*
添加onfocus事件下的样式
*/
function addFocusCssStyle(element,blurCssClassName,focusCssClassName)
{
    if(element)
    {
        var focusFunc={
            doFocus:function(){
                dojo.html.replaceClass(element,focusCssClassName,blurCssClassName);
        }
    }
        dojo.event.connectBefore(element,"onfocus",focusFunc,"doFocus");
}
}
/*
添加onmouseover事件下的样式
*/
function addMouseOverCssStyle(element,mouseOutCssClassName,mouseOverCssClassName)
{
    if(element)
    {
        var mouseOverFunc={
            doMouseOver:function(){
                dojo.html.replaceClass(element,mouseOverCssClassName,mouseOutCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onmouseover",mouseOverFunc,"doMouseOver");
    }
}
/*
添加onmouseout事件下的样式
*/
function addMouseOutCssStyle(element,mouseOutCssClassName,mouseOverCssClassName)
{
    if(element)
    {
        var mouseOutFunc={
            doMouseOut:function(){
                dojo.html.replaceClass(element,mouseOutCssClassName,mouseOverCssClassName);
            }
    }
        dojo.event.connectBefore(element,"onmouseout",mouseOutFunc,"doMouseOut");
    }
}

dojo.addOnLoad(initPageStyle);


</script>