1 div::after{ 2 content: attr(data-color); 3 /*attr()可以用在content属性上,但是其余的属于不可以,可以获取自定义属性的上值*/ 4 5 /*font-weight: attr(data-fontWeight font-weight);这是错的*/ 6 7 color: var(--color); 8 /*color: var(data-color);这是错的*/ 9 /*var（）可以动态获取style样式里面的样式*/ 10 11 font-size: calc(var(--width) + 80px); 12 /*calu（）可以动态计算属性值，不过不推荐使用*/ 13 }
<div data-color="#53ff53" data-fontWeight="300" style="--color: #53ff53;--30px;" width="300px">Lorem ipsum dolor sit amet.</div> <script> var div = document.querySelector("div"); div.dataset.color="#f00"; </script>