需要解决的代码片

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