CSS中獲取當(dāng)前時間
當(dāng)我們需要在網(wǎng)頁上顯示當(dāng)前時間或?qū)r間應(yīng)用于動畫等方面時，可以使用CSS來實現(xiàn)從用戶機(jī)器上獲取當(dāng)前時間。
div:before {
content: attr(data-time);
}
div {
display: none;
}上面的代碼將會在一個空的div之前添加一個偽元素(display:none)。
這樣做是因為在CSS樣式中，不能使用JavaScript語言，而我們需要此功能來獲取及展示當(dāng)前時間。所以我們需要在HTML文檔中增加額外的div元素以將當(dāng)前時間傳遞到CSS中。
<body><div data-time=""></div> </body>
在HTML代碼中，需要添加一個空div元素來將當(dāng)前時間傳遞到CSS中的偽元素中。這里我們使用了data-time屬性來傳遞時間。
<script>
var today = new Date();
var time = today.getHours() + ':' + today.getMinutes();
document.querySelector('div').setAttribute('data-time',time);
</script>在JavaScript中，我們獲取當(dāng)前時間，并將其設(shè)置為data-time的屬性值。在代碼中，我們使用document.querySelector來獲取HTML文檔中的第一個div元素。
現(xiàn)在我們已經(jīng)準(zhǔn)備好將當(dāng)前時間從JavaScript傳遞到CSS樣式表中了。
在CSS中，我們可以使用內(nèi)容(content)屬性和attr方法來獲取HTML元素中的屬性值，并將其添加到內(nèi)容(content)前面。
最后，我們使用偽元素來創(chuàng)建一個看似是CSS樣式的元素，但實際上是JavaScript獲取到的結(jié)果。
總結(jié)：可以使用data-*屬性來傳遞JavaScript到CSS中。在css中使用attr()方法來獲取這個值。