jQuery修改CSS偽元素屬性的方法
更新時間：2014年07月30日 14:51:29 投稿：whsnow
CSS偽元素不是DOM元素，因此你無法直接選擇到它們。下面與大家分享兩種不錯的修改方法，需要的朋友可以參考下
CSS偽元素（pseudo elements）不是DOM元素，因此你無法直接選擇到它們。
假設有如下HTML代碼：
<div class="techbrood" id="td_pseudo">techbrood introduction</div>
和CSS代碼：
.techbrood:before {
width: 0;
}
現(xiàn)在你想在某個元素的click事件中動態(tài)的把techbrood:before的width屬性設置為100%，
有兩個方法，一個是添加新的樣式：
$('head').append("<style>.techbrood::before{ width:100% }</style>");
（注意該方法將影響所有的class為techbrood的元素）
另外一個方法是為該元素添加新類，并通過設置新類的屬性來達到改變偽元素屬性的效果：
.techbrood.change:before{
width: 100%;
}
jQuery代碼：
$('#td_pseudo').addClass("change");
您可能感興趣的文章:
相關(guān)文章
昨天寫了篇通過jQuery源碼學習javascript（一），里面有一個定義對象C的方法，我早期也沒有太注意這個方面的技術(shù)細節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享2012-12-12
jquery 操作DOM案例，實現(xiàn)圖片的顯示，需要的朋友可以參考下2012-04-04
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器，使用jQuery EasyUI的朋友可以參考下。2011-09-09
昨日在一個前端網(wǎng)站上看見了一個老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個，現(xiàn)在分享給大家2011-12-12
這篇文章主要介紹了JQuery中Text方法用法,實例分析了Text方法設置文本內(nèi)容的使用方法,非常簡單實用,需要的朋友可以參考下2015-05-05
jQuery中select與datalist制作下拉菜單時的區(qū)別淺析
一般我們通常使用select制作下拉菜單，但是H5之后，datalist也可以充當select的角色，而且兩者還有一點小的不同。具體區(qū)別詳解小編通過本文給簡單介紹下2016-12-12
jQuery實現(xiàn)的省市聯(lián)動菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的省市聯(lián)動菜單功能,結(jié)合完整實例形式分析了jQuery實現(xiàn)級聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應處理技巧.非常簡單實用,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了jquery Banner輪播選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jquery ajax雙擊div可直接修改div中的內(nèi)容
這篇文章主要介紹了jquery ajax雙擊div直接修改div中內(nèi)容的相關(guān)方法，感興趣的小伙伴們可以參考一下2016-03-03
jQuery實現(xiàn)簡易商城系統(tǒng)項目實操
這篇文章主要介紹了jQuery實現(xiàn)簡易商城系統(tǒng)項目實操，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06