javascript - CSS 文本装饰 : reverse

Question

令我惊讶的是 CSS 中没有“text-decoration: reverse”，因为使用 JavaScript 实现它似乎很尴尬。 IE。将元素的前景色和背景色分别设置为父元素的背景色和前景色。

我注意到了 JavaScript 技术 here

当然没那么复杂吧？

Answer 1

什么叫做还原？你的意思是将背景设置为前景色，反之亦然？(也许这是一个愚蠢的评论，但如果是这样，它就不是装饰品了吗？)

无论如何，在这里你将要在 DRY 和 MVC 之间进行斗争:

• 要么声明一个新的 CSS 类每次你想这样做。那是多余而痛苦，但你确实将样式与代码分开。

通常:

.mydiv {
   background-color: blue;
   color: red;
   font-family:...;
   (...)
}


.mydiv:hover {
   color: red;
   background-color: blue;
}

• 另一种选择是通过 javascript 来实现。 Proxify 建议使用 jQuery。

  结果可能是这样的……(未测试)

$(".invert").map(function (el) {
       var color = el.css("color");
       var bgcolor = el.css("background-color");
       el.css("color", bgcolor).css("background-color",color);
    })