【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);

猜你喜欢

转载自blog.csdn.net/amyleeymy/article/details/79389576