1. 程式人生 > >【JQ】jQuery改變css偽元素樣式

【JQ】jQuery改變css偽元素樣式

偽元素是什麼?例如 :bofore、:after

偽元素不是dom,不能直接操作。

若有以下html和css,通過操作偽元素改變圖示顏色:

<div class = "table-container">

    <span class="glyphicon glyphicon-number"></span>

</div>
.glyphicon-number:before{content:"123";color:#000;}

有兩種方法實現:

(1)通過新增class的方法實現(對於本例子,適用於改變的顏色已知的情況下):

$(".table-container .glyphicon-number").addClass("change");

        同時加上對應的css:

.glyphicon-number:before{content:"123";color:#fff;}

(2)新增新的樣式(color可為變數)

var color = "#fff",appendStr;
appendStr = "<style>.glyphicon-number:before{color:" + color + "}</style>";
$(".table-container").append(appendStr);