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

需要解决的代码片

<style type="text/css">
	*{padding: 0;margin: 0;}
	body{
		display: flex;
		width: 100vw;
		height: 100vh;
		background: #636e72;
		justify-content: center;
		align-items: center;
	}

	button{
		width: 100px;
		height: 40px;
	}

	button::after{
		content: '';
		width: 3px;
		height: 3px;
		display: inline-block;
	}

	@keyframes load{
		30%{
			box-shadow: 3px 0 0 currentColor;
		}
		60%{
			box-shadow: 3px 0 0 currentColor,9px 0 0 currentColor;
		}
		90%{
			box-shadow: 3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
		}
	}
</style>

<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在控制器中一个方法可跳视图也可跳方法问题解决