標籤：before和after 修改css虛擬元素樣式 css虛擬元素
CSS虛擬元素:before和:after可以實現很多有趣的功能，我們項目中使用的ionicframework架構的ionic.css檔案中大量使用到了這2個虛擬元素。虛擬元素可以用來定義樣式，但是和正常的dom元素不同，我們沒有辦法選中這些虛擬元素，也就不能像普通元素那樣來修改它。
<head><style>.content{margin-top:100px;}.content:before{content:'target-before';color:#33B5E5;position:relative;top:-10px;}.content:after{content:'target-after';color:#33B5E5;position:relative;top:10px;}</style></head><body><button style="width:50px;height:25px;background-color:#f00;color:#fff;" onclick="changeColor('f00');">red</button><button style="width:50px;height:25px;background-color:#0f0;color:#fff;" onclick="changeColor('0f0');">green</button><button style="width:50px;height:25px;background-color:#00f;color:#fff;" onclick="changeColor('00f');">blue</button><div class="content">I am a programmer.</div></body>
這段HTML中我們用到了:before和:after在content前面和後面添加了target-before和target-after。如果我們想實現這個功能：點擊按鈕的時候，將target-before和target-after變成相應的顏色。這個時候我們就需要修改虛擬元素中定義的樣式了。
我們沒有辦法直接選中虛擬元素來修改它的樣式，只能是通過新增虛擬元素來覆蓋之前虛擬元素的樣式。
function changeColor(colorRGB){$("<style type='text/css' id='dynamic-before' />").appendTo("head");$("<style type='text/css' id='dynamic-after' />").appendTo("head");$("#dynamic-before").text(".content:before{color:#" + colorRGB+ ";}");$("#dynamic-after").text(".content:after{color:#" + colorRGB+ ";}");}這段代每次點擊按鈕的時候，我們都會追加:after和:before樣式(改變文字顏色)，這樣可以實現改變虛擬元素樣式的目的。
上面這種做法直接將css寫在了js檔案中，一般不是我們推薦的做法。我們可以預先將需要的樣式定義在css檔案中，然後在js中通過修改class來實現匹配新的樣式。
<head><style>.content{margin-top:100px;}.content:before{content:'target-before';color:#33B5E5;position:relative;top:-10px;}.content:after{content:'target-after';color:#33B5E5;position:relative;top:10px;}/****新增虛擬元素樣式,用來覆蓋原有的樣式**********/.content.red:before{color:#f00;}.content.red:after{color:#f00;}.content.green:before{color:#0f0;}.content.green:after{color:#0f0;}.content.blue:before{color:#00f;}.content.blue:after{color:#00f;}</style><script>$(function(){$("button").click(function(){var cls = $(this).text();$('.content').removeClass().addClass('content ' + cls);});})</script></head><body><button style="width:50px;height:25px;background-color:#f00;color:#fff;">red</button><button style="width:50px;height:25px;background-color:#0f0;color:#fff;">green</button><button style="width:50px;height:25px;background-color:#00f;color:#fff;">blue</button><div class="content">I am a programmer.</div></body>
還有一點值得注意：如果我們只是需要修改虛擬元素的content屬性，那麼可以有更簡單、優雅的實現方式。可以使用attr函數，虛擬元素的content屬性支援這個方法。
<style>.ribbon:before { display: block; content: attr(ribbon); background: #eee;} .ribbon:after { display: block; content: " "; border-left: 5px dotted transparent; border-top: 5px solid #ccc; height: 0; width: 0;}/*** Non-Functional Apperance Styles ***/div.ribbon { margin: 20px; float: left; font-size: 11px; font-family: Arial; }div.ribbon:before { padding: 2px 3px; }</style><script>window.onload = function(){document.getElementById('attrText').addEventListener('keyup', function(){document.getElementById('ribbon').setAttribute('ribbon', this.value);});}</script><body><div>ribbonElement.setAttribute('ribbon', <input id="attrText" type="text"/>)</div><div id="ribbon" class="ribbon" ribbon="I am a CSS Ribbon"></div></body>
http://www.28im.com/css/a937345.html
http://www.backalleycoder.com/2012/08/09/mvcr-minimum-viable-css-ribbon/
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
JavaScript修改CSS虛擬元素:after和:before的樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
