网站开发进阶(六十):Javascript追加style样式

249 阅读1分钟

前言

在前端开发过程中,会遇到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、第二种方式把样式定义成classelement表示待追加样式的dom节点,value表示class名称。

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

拓展阅读