【JQ】jQuery改變css偽元素樣式
阿新 • • 發佈:2019-01-27
偽元素是什麼?例如 :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);