jQuery如何改变css伪元素样式

首先我们看一下css伪元素是什么:

  CSS 伪元素用于向某些选择器设置特殊效果。

伪元素有哪些:

  :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式。

  :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式。

  :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容。

  :after 伪元素:":after" 伪元素可以在元素的内容之后插入新内容。

项目中遇到的案例:

.topo-db-float:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    width: 10px;
    height: 10px;
    border-top: solid 1px #DCDCDC;
    border-left: solid 1px #DCDCDC;
    transform: rotateZ(45deg);
    background-color: #fff;
}

现在有需求需要通过不同的环境对CSS作动态修改,那么问题来了,怎么用jquery改变伪元素的样式呢?

$('.topo-db-float').append("<style>#dbFloatBox::before{top:93px}</style>");

通过上面代码可以给class为 topo-db-float 标签中top设置为93px
设置前:
在这里插入图片描述
设置后显示为:
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值