用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>