伪类的一些小操作

Posted 2020-10-13 cyany_blue

 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;--width:30px;" width="300px">Lorem ipsum dolor sit amet.</div>
    <script>
        var div = document.querySelector("div");
        div.dataset.color="#f00";
    </script>