Question

我有这种造型：

section.tipos .content > div:before {
    background: none repeat scroll 0 0 #DDDDDD;
    content: " ";
    height: 10px;
    left: 32%;
    position: absolute;
    top: -10px;
    width: 10px;
}

哪种方法正常，

但是当发生某些事件时，我想将左侧属性更改为不同的％

我知道这可以通过类名或样式来实现（当然）。但是我的老板并不喜欢课程名称，除非他们100％需要。

问题是：我可以从javascript更改伪选择器的CSS吗？像这样的东西（但有效）

$('section.tipos .content > div:before').css({ 'left' : 50+index*17});

Answer 1

不，你不能这样做。 :before和:after伪元素无法以任何方式提供给您的Javascript代码。

您可以希望的最好的解决方法是使用您的Javascript来更改主要元素的类，并根据它具有的类具有:before伪元素的单独CSS代码。

然后你可以拥有这样的CSS代码：

section.tipos .content > div.newClass:before {
    ....
}

但是，我注意到你想要将宽度设置为计算值;使用上述技术可能会很棘手。 CSS calc()可能有所帮助，具体取决于index的用途，并取决于您需要的浏览器支持级别。

Answer 2

尝试将'％'附加到css样式值：

$('section.tipos .content > div:before').css({ 'left' : 50+index*17 + '%'});

无法编辑css样式：before，：after？

2 个答案: