前言
在前端开发过程中,会遇到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;
}
}