javascript - 如何根据复选框的状态更改已经拥有自己的样式表的另一种媒体类型的 CSS 值？

Question

我有两个单独的样式表，比如说 main.css.sass 和 print.css.sass。目前，打印样式表大多只是隐藏不必要的信息并且是静态的。但是，我现在有一个 div，我想根据是否选中复选框来隐藏或显示在打印媒体上。

我想这最好通过 Javascript 和/或 JQuery 来完成。我在 JQuery 中拉取复选框的状态或类似的东西没有任何问题。我的问题是找到一种让 CSS 依赖于该状态的好方法。

目前，我正在 main.css.sass 文件中尝试：

@media print
    #foo
        display: none

编译为：

@media print {
    #foo {
        display: none;
    }
}

但这目前不起作用。（这只是一个测试，看看我是否可以通过这种方式影响 print.css.sass 样式表，到目前为止，答案似乎是否定的）。

作为附加说明，在 print.css.sass 样式表中根本没有提到 #foo id。

PS：这也是使用 RoR。

score 3 · Accepted Answer

如果您在包含的 CSS 文件中指定元素的显示设置，则无法使用 JavaScript 在元素上轻松更改它。相反，您可以使用 jQuery 通过在元素上添加/删除 CSS 类来控制它。

@media print
    #foo {
        display:none
        &.visible {
            display:block
        }
    }

使用 jQuery，您可以$('#foo').toggleClass('visible')根据复选框的状态使用。

1 回答 1