jQuery修改CSS偽元素屬性的方法

更新時(shí)間：2014年07月30日 14:51:29 投稿：whsnow

CSS偽元素不是DOM元素，因此你無法直接選擇到它們。下面與大家分享兩種不錯(cuò)的修改方法，需要的朋友可以參考下

CSS偽元素（pseudo elements）不是DOM元素，因此你無法直接選擇到它們。

假設(shè)有如下HTML代碼：

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代碼：

.techbrood:before {
width: 0;
}

現(xiàn)在你想在某個(gè)元素的click事件中動(dòng)態(tài)的把techbrood:before的width屬性設(shè)置為100%，

有兩個(gè)方法，一個(gè)是添加新的樣式：

$('head').append("<style>.techbrood::before{ width:100% }</style>");

（注意該方法將影響所有的class為techbrood的元素）

另外一個(gè)方法是為該元素添加新類，并通過設(shè)置新類的屬性來達(dá)到改變偽元素屬性的效果：

.techbrood.change:before{
width: 100%;
}

jQuery代碼：

$('#td_pseudo').addClass("change");

您可能感興趣的文章:

偽元素

相關(guān)文章

通過jQuery源碼學(xué)習(xí)javascript(二)
昨天寫了篇通過jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享
2012-12-12
jquery 操作DOM案例代碼分享
jquery 操作DOM案例，實(shí)現(xiàn)圖片的顯示，需要的朋友可以參考下
2012-04-04
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器，使用jQuery EasyUI的朋友可以參考下。
2011-09-09
jQuery版仿Path菜單效果
昨日在一個(gè)前端網(wǎng)站上看見了一個(gè)老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個(gè)，現(xiàn)在分享給大家
2011-12-12
JQuery中Text方法用法實(shí)例分析
這篇文章主要介紹了JQuery中Text方法用法,實(shí)例分析了Text方法設(shè)置文本內(nèi)容的使用方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-05-05
jQuery中select與datalist制作下拉菜單時(shí)的區(qū)別淺析
一般我們通常使用select制作下拉菜單，但是H5之后，datalist也可以充當(dāng)select的角色，而且兩者還有一點(diǎn)小的不同。具體區(qū)別詳解小編通過本文給簡(jiǎn)單介紹下
2016-12-12
jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2017-01-01
jquery Banner輪播選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jquery Banner輪播選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jquery ajax雙擊div可直接修改div中的內(nèi)容
這篇文章主要介紹了jquery ajax雙擊div直接修改div中內(nèi)容的相關(guān)方法，感興趣的小伙伴們可以參考一下
2016-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易商城系統(tǒng)項(xiàng)目實(shí)操，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-06-06