网站开发进阶（六十）：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;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

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;
	}
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

拓展阅读

• 《Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局》

• 《Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应》

• 《Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局》

• 《Vue进阶（幺柒伍）：前端用户体验提升（六）色彩搭配》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/115157667