Question

我正在用HTML在CSS上试验addRule。如果我这样做，它的工作正常：

document.styleSheets[0].addRule("#" + id + ':hover', 'max-height: ' + desiredHeight + 'px;');

其中id和desiredHeight是已设置的变量。当您将鼠标悬停在元素上时，这会应用最大高度。我的问题是：我怎样才能添加这样的结构：

body.link, body.appAdd, body.pageLike {
    #id:hover{
        overflow:hidden;
        maxHeight: 400px;
    }
}

请帮助;）

Answer 1

在浏览器能够理解之前，必须将该结构编译成纯CSS。

所以在这种特殊情况下，它会是这样的：

document.styleSheets[0].addRule(
    'body.link #'+id+':hover, body.appAdd #'+id+':hover, body.pageLike #'+id+':hover, ',
    'max-height: ' + desiredHeight + 'px;'
);

但如果您只按照推荐的方式在一个地方使用该ID，那么您所需要的就是（您已经拥有的）：

document.styleSheets[0].addRule(
    '#'+id+':hover',
    'max-height: ' + desiredHeight + 'px;'
);

Javascript addRule多个选择器

1 个答案: