使用 CSS/JS 反转和重新反转元素

Question

我想通过单击特定元素来反转和重新反转页面 (div) 的背景图像。现在我有了脚本：

$(function(){
$(".invert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(100%)",
    "-moz-filter": "invert(100%)",
    "-o-filter": "invert(100%)",
    "-ms-filter": "invert(100%)"

    });
    $(".invert").addClass("reinvert");
    $(".invert").removeClass("invert");

});

$(".reinvert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(0%)",
    "-moz-filter": "invert(0%)",
    "-o-filter": "invert(0%)",
    "-ms-filter": "invert(0%)"

    });
    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});
});

反转函数工作正常，但它不会重新反转元素。

如果可能的话，我还想让它至少在 Firefox 和其他浏览器中工作。

更新： 将代码更改为：

$(function(){
$(".invert").click(function(){
    $(".pattern").toggleClass("inverted");
    $(".invert").css("display", "none");
    $(".re-invert").css("display", "inline");
});
$(".re-invert").click(function(){
    $(".pattern").toggleClass("inverted");
    $(".re-invert").css("display", "none");
    $(".invert").css("display", "inline");
});
});

使用 CSS：

.inverted {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}

这在 Chrome 中运行良好（至少是我想要的方式），但仍在寻找任何方法使其在 Firefox 中运行相同。谢谢大家的帮助，对不起，我没有足够的声誉来评价答案。

这是工作代码：http://jsfiddle.net/5AdxC/1/

更新 2： 似乎我找到了一种让它在 Chrome 和 Firfox 中工作的方法，但没有用 Opera 或 IE 对其进行测试。 http://jsfiddle.net/5AdxC/2/

Firefox 的 CSS 选项：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");

Answer 1

您的代码运行良好！

用你的代码看这个小提琴：http://jsfiddle.net/K5NJy/1/

也许，问题在于您在 .invert 和 .reinvert 元素上交换类：

$(".invert").addClass("reinvert"); // perhaps this is causing unwanted behavior
$(".invert").removeClass("invert"); // perhaps this is causing unwanted behavior

正如@Shivan 所说，这仅适用于基于 webkit 的浏览器。其他不支持这种形式的过滤器。

编辑：（在您需要 Firefox 或 Opera 之后）

查看这个更新的小提琴：http://jsfiddle.net/K5NJy/5/

这个更新的小提琴将在 Chrome、IE9 和 Firefox 中工作。 （我没有安装 Chrome，所以无法检查，但基于 webkit 的浏览器应该支持它）。

如上所述（以及@Shivan），Firefox (Gecko) 仅支持url() 过滤器方式。所以你需要一个 SVG/XML 地图才能工作。

我从这里提取了 Firefox 代码：https://stackoverflow.com/a/19691142/1355315

另外，请注意，您的代码中 css 的应用顺序会影响 IE9 和 Firefox。无论最后应用哪种过滤器方式都将成立。因此，如果最后应用url()，它将在 Firefox 中有效，但在 IE 中无效。因此，您将在小提琴中进行更改以进行检查。

此外，对于较旧的 IE (DXImageTransform.Microsoft.Invert，它在 IE9 及更高版本中已被弃用。

希望对您有所帮助。

Answer 2

对于 Firefox，Gecko 目前只实现了 filter 属性的url() 形式； . IE 4-9 有另一种语法过滤器。

根据规范，没有称为-moz-filter、-ms-filter 和-o-filter 的东西。

参考：filter at MDN

Answer 3

既然可以toggle()，为什么还要有 '.invert' 和 '.reinvert'？

让你的代码变得超级简单，无论如何here is my version 只反转 bg 并保持其他所有内容都是静态的。

另外，为什么不在你的样式表中为倒置创建类，而不是做内联css，所以'reverted'只是不使用具有切换效果的类？让代码更专业:-)

Answer 4

$(".reinvert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(100%)",
    "-moz-filter": "invert(100%)",
    "-o-filter": "invert(100%)",
    "-ms-filter": "invert(100%)"

    });
    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});

这样，您将再次将过滤器应用到 100%，然后回到原来的位置。

Answer 5

您可以通过清除过滤器来实现：

$(".reinvert").click(function(){
    $(".pattern").css({
        "-webkit-filter": "",
        "-moz-filter": "",
        "-o-filter": "",
        "-ms-filter": ""
    });

    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});

工作小提琴：http://jsfiddle.net/Ad4mD/.