原生js获取css伪类元素并设置属性

需要解决的代码片

<button>提交button>

我们需要在点击提交的时候给button::after加上load动效，这时候该怎么做呢？

解决需求（设置或更改伪类的属性）

<script type="text/javascript">
	function loading() {
		document.styleSheets[0].addRule('button::after','animation-name:load;animation-duration: 3s;animation-iteration-count: infinite;')
	}
</script>

ok，这时候设置的属性就可使用了。

获取伪类元素并取值（如果你只是单纯的取值，请看这里）

<script type="text/javascript">
	var buttonObj = document.querySelector('button')
	var buttonAfterStyle = getComputedStyle(buttonObj,':after')
	//第一种方法
	alert('buttonAfterStyle.getPropertyValue("width") result: ' + buttonAfterStyle.getPropertyValue('width'))
	//第二种方法
	alert('buttonAfterStyle.width result: ' + buttonAfterStyle.width)
</script>

本博客其他文章推荐

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）

让一个小球无限的弹弹弹~(CSS实现球无限弹动)

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

maven新手上路–创建webapp项目，引入jstl、el依赖及el不解析的问题解决（详细图文）

springmvc5.1.9在控制器中一个方法可跳视图也可跳方法问题解决