用js實現(xiàn)before和after偽類的樣式修改的示例代碼
更新時間：2017年09月07日 17:16:29 作者：wksmile
本篇文章主要介紹了用js實現(xiàn)before和after偽類的樣式修改的示例代碼，具有一定的參考價值，有興趣的可以了解一下
本文介紹了使用javascript,jQuery實現(xiàn)修改before,after偽類的樣式，分享給大家，具體如下：
最近遇到一個需要改變:before,:after 偽類的樣式，發(fā)現(xiàn)css中并不能直接選擇某一個元素的:before和:after偽類元素，所以特總結了使用javascript和jQuery改變元素的:before和:after偽類樣式的方法。
類如如下的html及樣式
<p class="red">Hello,are you kain?</p>
css樣式
.red:before {
content: 'red',
background-color : red
}
1.使用javascript或者jQuery切換，增加元素的類
.green:before {
content: 'green';
background-color: green;
}
$('p').addClass('green');
2.在存在的style文檔中動態(tài)插入樣式
document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);
3.創(chuàng)建一份新的樣式表，并使用JavaScript或jQuert將其插入到中
var style = document.creatElement('style');
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red:before','background-color:green');
sheet.insertRule('.red:before{background-color:green}',0);
// jQuery
$('<style>.red:before{background-color:green}</style>').appendTo('head');
4.使用HTML5的data-屬性，在屬性中使用attr()動態(tài)修改。
在p標簽中增加data-attr="red"屬性，然后
$('red').attr('data-attr','green');
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript對象的創(chuàng)建模式與繼承模式示例講解
繼承機制是面向對象程序設計使代碼可以復用的最重要的手段，它允許程序員在保持原有的特性基礎上進行擴展，增加功能，這樣產(chǎn)生新的類，稱作是派生類。繼承呈現(xiàn)了面向對象程序設計的層析結構，體現(xiàn)了由簡單到復雜的認知過程。繼承是類設計層次的復用2022-12-12
這篇文章主要為大家詳細介紹了javascript實現(xiàn)登錄框拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
微信小程序在其他頁面監(jiān)聽globalData中值的變化
這篇文章主要給大家介紹了關于微信小程序如何在其他頁面監(jiān)聽globalData中值的變化的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
今天小編就為大家分享一篇layer.alert自定義關閉回調事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了javaScript中slice函數(shù)用法,較為詳細的分析了javascript中slice函數(shù)的功能、定義及使用方法,需要的朋友可以參考下2015-06-06
本文將利用JS實現(xiàn)一個簡單的網(wǎng)頁版地圖，這個簡單的網(wǎng)頁版地圖能根據(jù)城市名進行位置查詢。文中的示例代碼講解詳細，感興趣的可以了解一下2022-05-05
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 函數(shù)表達式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本篇文章主要介紹了js實現(xiàn)符合國情的日期插件的方法與步驟。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js中json對象和字符串的理解及相互轉化操作實現(xiàn)方法
這篇文章主要介紹了js中json對象和字符串的理解及相互轉化操作實現(xiàn)方法,結合實例形式分析了json對象與字符串的功能以及相互轉換操作實現(xiàn)技巧,需要的朋友可以參考下2017-09-09