CSS偽元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，還可以用它完成很多簡單的任務(wù)，而不需要多余的HTML元素。以前，偽元素的CSS屬性是無法用JavaScript獲取的，但現(xiàn)在，有了一個新的JavaScript方法可以訪問它們！假設(shè)你的CSS代碼是這樣的：

復(fù)制代碼代碼如下:

.element:before {

 content: 'NEW';

 color: rgb(255, 0, 0);

}

為了獲取.element:before里的樣式屬性，你可以使用下面的JavaScript代碼：

復(fù)制代碼代碼如下:

var color = window.getComputedStyle(

 document.querySelector('.element'), ':before'

).getPropertyValue('color')

將偽元素作為window.getComputedStyle方法的第二個參數(shù)，你能獲取到偽元素樣式里的屬性！將這個技巧放入你的知識庫里，隨著瀏覽器的發(fā)展，偽元素將會變得越來越有用！

您可能感興趣的文章:

相關(guān)文章

countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
教你JS中的運算符乘方、開方及變量格式轉(zhuǎn)換
本文運用實例教大家JS中的運算符乘方、開方及變量格式轉(zhuǎn)換，代碼簡單明了，有需要的可以參考學(xué)習(xí)。
2016-08-08
JavaScript中number轉(zhuǎn)換成string介紹
這篇文章主要介紹了JavaScript中number轉(zhuǎn)換成string介紹,本文講解了4個把number轉(zhuǎn)換成string的函數(shù),需要的朋友可以參考下
2014-12-12
es6中的解構(gòu)賦值、擴(kuò)展運算符和rest參數(shù)使用詳解
這篇文章分別給大家介紹了關(guān)于es6中解構(gòu)賦值、擴(kuò)展運算符和rest參數(shù)使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-09-09
H5喚醒APP實現(xiàn)方法及注意點總結(jié)
目前通過H5頁面喚起App的場景十分常見,比如常見的分享功能,這篇文章主要給大家介紹了關(guān)于H5喚醒APP實現(xiàn)方法及注意點的相關(guān)資料,需要的朋友可以參考下
2021-06-06
canvas?2d?環(huán)形統(tǒng)計圖手寫實現(xiàn)示例
這篇文章主要為大家介紹了canvas?2d?環(huán)形統(tǒng)計圖手寫實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
javaScript(JS)替換節(jié)點實現(xiàn)思路介紹
獲取要替換的節(jié)點,這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈
2013-04-04
小程序怎樣讓wx.navigateBack更好用的方法實現(xiàn)
這篇文章主要介紹了小程序怎樣讓wx.navigateBack更好用的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
JavaScript實現(xiàn)N皇后問題算法謎題解答
這篇文章主要介紹了JavaScript實現(xiàn)N皇后問題算法謎題解答,N皇后問題是指將N個皇后放置在NxN的國際象棋棋盤上,其中沒有任何兩個皇后處于同一行、同一列或同一對角線上,以使得它們不能互相攻擊,需要的朋友可以參考下
2014-12-12
JS獲取當(dāng)前時間的年月日時分秒及時間的格式化的方法
這篇文章主要介紹了js獲取當(dāng)前時間的年月日時分秒及時間的格式化，本文通過實例代碼講解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12