1. 程式人生 > >偽類的一些小操作

偽類的一些小操作

document ack weight eight ips 但是 width 推薦 dataset

 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>

偽類的一些小操作