javascript - CSS::before::after 伪元素动态宽度

Question

我想用单个 div 元素和像 ::before 这样的 css 伪元素制作星数进度条。

我唯一不能做的就是用 Javascript 操纵 ::before 元素的宽度。

这是我的例子:

.review-rate {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	width: 100px;
	height: 18px;
}
.review-rate::before {
	content: "";
	display: block;
	width: attr(data-width);
	height: 18px;
	width: 55%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==);
	background-repeat: repeat-x;
	background-position: 0 -18px;
}

<div class="review-rate" data-toggle="review" data-value="3.5" data-width="50" data-count="17"></div>

有什么方法可以操纵 ::before 元素的 width 吗？

也许类似于 width: attr(data-width); ?

我们将不胜感激。

Answer 1

我知道动态更改 :before 和 :after css 的一种方法是 @Brett DeWoody 提到的添加样式标签。

在您的情况下，您可以简单地切换 :before 和 div 的 Angular 色。然后使用 div 宽度代替 :before。像这样:

.review-rate {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==");
background-position: 0 -18px;
background-repeat: repeat-x;
height: 18px;
overflow: visible;
position: relative;
width: 50px;
}
.review-rate::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAIAAAAGkY33AAACp0lEQVRIx6VVz29MURQeC5UQ/AHCAgv+AT9KRBGNBSsre0IiQVjYCLGpiDFl0UqxaqdaDQkVGWVU40eGEtFFabWNVlKJtNMgmtJ2Pt9597575973XtPEyVmc851z5t53zrnfpBCV4TweHUK2Ek2bRGnQJRiRlOONf0TbHnSeQrHPwekSZIgJ8cVfu9C4EcV+JEnxMxo3YORZpHj8k9xwasLJHn2Nb28chAlNm835qriElh1S78mdvbi7L3J+H1qqpEQXf3mM/DE/6eeIVFJpeMJkluji3EF8/+BnvDiLgfuiNDxhMkt0cfM2jb67ipvr0bpLlHebnRaloRCGmKAkuyUsvrVdQzNTaD+AwoWYVhNkiAlKgpKgWBpgpISu0+g4olqiEboELQLZHP/aRpq34s8vbdMILukI51rWsB4b+PsbrTvlnO40ui+LQZdgfMO8UQ09ROdJ3NuPV+dFaXA3CcaPSpakyi5J/jjqVmAoF/5WTlyCZkmkW6Wy9Rzrtev5vh4/hp0vpEswYT0D4cZz76NLahezP+FhmCd5ezeennD6Jx3qEZChxCdphM1gMxUTcIpUukGH5iSDcia5vhbpClEa82USdvJiKl4ZmotJapclViqtXZrAJFeW+6lkJbbXA5nmMwm3N3rO4AMMtMfg8irKmSSaUb8SpRlRGtGowyTR8Mtz+otoRKP2YXAYCnpyFBODWqcndTENAzJBZTasCYs5TAWlF6E3m7ieDDFBZ1aExRyAvdICFGriaKhGQibNFt9Y53/SaMFnfy/BXttrWGaxJTpDjATjG+aNin9oMvtZPD8jSoNCMH5UsiSVNvA2g8kxtFWHv1UtLkGTQD7wmcSsZ8dhXFvlnEOXYMJ6hkzitH3+D+N/n6THJA2rcWkhMktkkAlM8g8rt+IWmuHa2gAAAABJRU5ErkJggg==");
background-repeat: repeat-x;
content: "";
display: block;
height: 18px;
position: relative;
width: 100px;
z-index: -1;
}

 <div class="review-rate" data-toggle="review" data-value="3.5" data-width="50" data-count="17"></div>