用JavaScript动态地使用伪元素CSS

Question

是否可以动态设置伪元素的CSS？例如：

使用jQuery动态样式帮助容器

$('#help').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset,
    "bottom" : -windowHeight,
    "left" : 200
});

jQuery 尝试设置帮助容器的内部边框：

$('#help:before').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset
});

上述的CSS文件

#help
{
    opacity: 0.9;
    filter:alpha(opacity=90);   
    -moz-opacity: 0.9;          
    z-index: 1000000;
    bottom: -550px;
    left: 400px;
    background-color: #808080;
    border: 5px dashed #494949;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;        
}
#help:before 
{
    border: 5px solid white;
    content: '';
    position: absolute;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;          
}

- Jack

---

可能是从JavaScript设置CSS伪类规则的重复问题。 - thirtydot

Answer 1

您无法直接通过jQuery实现此操作。

看一下这个问题：在JavaScript中设置CSS伪类规则。 @Box9的答案可能是您实际应该使用的：

我组合了一个小型库，因为我确实认为在JS中操作样式表存在有效的用例。

- thirtydot

Answer 2

不要使用 .css() 来设置宽度和高度，而应该直接使用 .width() 和 height()。

- Blazemonger

---

你能发一下这段代码吗？我的代码不起作用： $('#help:before').width(windowHeight - 410) .height(windowHeight - 210); - Jack