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 样式表，到目前为止，答案似乎是否定的)。

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

PS:这也是使用 RoR。

Answer 1

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

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

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