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