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");
您可能感興趣的文章:
- Javascript獲取CSS偽元素屬性的實(shí)現(xiàn)代碼
- django創(chuàng)建css文件夾的具體方法
- Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫效果的代碼
- Vue3新特性之在Composition API中使用CSS Modules
- javascript+css實(shí)現(xiàn)俄羅斯方塊小游戲
- js+css實(shí)現(xiàn)全屏側(cè)邊欄
- 詳解VScode自動(dòng)補(bǔ)全CSS3前綴插件以及配置無效的解決辦法
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
- 詳解CSS偽元素的妙用單標(biāo)簽之美
相關(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案例，實(shí)現(xiàn)圖片的顯示，需要的朋友可以參考下2012-04-04
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器，使用jQuery EasyUI的朋友可以參考下。2011-09-09
昨日在一個(gè)前端網(wǎng)站上看見了一個(gè)老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個(gè)，現(xiàn)在分享給大家2011-12-12
這篇文章主要介紹了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
這篇文章主要為大家詳細(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