JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧
更新時(shí)間：2015年03月13日 09:25:00 投稿：junjie
這篇文章主要介紹了JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
CSS偽元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，還可以用它完成很多簡(jiǎn)單的任務(wù)，而不需要多余的HTML元素。以前，偽元素的CSS屬性是無法用JavaScript獲取的，但現(xiàn)在，有了一個(gè)新的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方法的第二個(gè)參數(shù)，你能獲取到偽元素樣式里的屬性！將這個(gè)技巧放入你的知識(shí)庫(kù)里，隨著瀏覽器的發(fā)展，偽元素將會(huì)變得越來越有用！
相關(guān)文章
uniapp開發(fā)小程序?qū)崿F(xiàn)全局懸浮按鈕的代碼
這篇文章主要介紹了uniapp開發(fā)小程序如何實(shí)現(xiàn)全局懸浮按鈕,但是在uniapp中式?jīng)]有window對(duì)象，和dom元素的，需要獲取頁面上節(jié)點(diǎn)的幾何信息，具體實(shí)例代碼詳細(xì)跟隨小編一起看看吧2022-03-03
js動(dòng)態(tài)添加刪除,后臺(tái)取數(shù)據(jù)(示例代碼)
這篇文章主要是對(duì)js動(dòng)態(tài)添加刪除,后臺(tái)取數(shù)據(jù)(示例代碼)進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
更正確的asp冒泡排序...2007-05-05
Javascript的getYear、getFullYear、getUTCFullYear異同分享
getYear、getFullYear、getUTCFullYear都是Javascript的Date對(duì)象的方法函數(shù)2011-11-11
js實(shí)現(xiàn)倒計(jì)時(shí)及時(shí)間對(duì)象
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)效果及時(shí)間對(duì)象,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁面大小自行調(diào)整
正如標(biāo)題所言兩個(gè)Table固定表頭，可根據(jù)頁面大小自行調(diào)整使用JavaScript實(shí)現(xiàn)，具體的示例如下，感興趣的朋友可以參考下2014-01-01
利用babel將es6語法轉(zhuǎn)es5的簡(jiǎn)單示例
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以下面這篇文章就來給大家詳細(xì)介紹了關(guān)于利用babel將es6語法轉(zhuǎn)es5的相關(guān)資料，文章通過示例介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
本篇文章主要介紹了JS函數(shù)節(jié)流防抖，函數(shù)節(jié)流和函數(shù)防抖為了解決類似需求應(yīng)運(yùn)而生的，有興趣的可以了解一下2017-10-10
javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
javascript 控制 html元素 顯示/隱藏，下面是一些逐步的實(shí)現(xiàn)原理。2009-09-09
axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,下面這篇文章主要給大家介紹了關(guān)于axios概念介紹和基本使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06