网站开发进阶（六十）：Javascript追加style样式

前言

在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。

思路

1、通过拼接cssText方式实现。

2、通过设置class，累加设置class方式实现 。

代码示例

1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。

function setStyle(el, strCss){
    function endsWith(str, suffix) {
        var len = str.length - suffix.length;
        return len >= 0 && str.indexOf(suffix, len) == l;
    }
    var sty = el.style,
        cssText = sty.cssText;
    if(!endsWith(cssText, ';')){
        cssText += ';';
    }
    sty.cssText = cssText + strCss;
}

2、第二种方式把样式定义成class，element表示待追加样式的dom节点，value表示class名称。

function addClass(element,value){  
    if(!element.className){            
        element.className=value;
    } else {
        newClassName=element.className;
        newClassName+="";
        newClassName+=value;
        element.className=newClassName;
    }
}