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