CSS text-decoration：reverse [英] CSS text-decoration: reverse

问题描述

我很惊讶，在CSS中没有text-decoration：reverse，因为使用JavaScript看起来很尴尬。 I.E.将元素的前景和背景颜色分别设置为父级的背景和前景。

我注意到了针对这里

当然不是那么复杂吗？

解决方案

你叫什么回复？
是否意味着将背景设置为前景颜色，反之亦然？
（也许这是一个愚蠢的评论，但如果是这样不是装饰是吗？）

无论如何你要在DRY和MVC在这里：

• 每次你要声明一个新的CSS类
  。这是
  冗余和痛苦，但你确实
  将样式与代码分离。

p>

  .mydiv {
 background-color：blue; 
 color：red; 
 font-family：...; 
（...）
} 
 
 
 .mydiv：hover {
 color：red; 
 background-color：blue; 
} 
  

• 通过javascript。

  结果可能看起来像这样...（未测试）
  
  

    $（。invert）。map（function（el）{
   var color = el.css（color） ; 
   var bgcolor = el.css（background-color）; 
   el.css（color，bgcolor）.css（background-color，color）; 
  } ） 

  
  

  I'm surprised that there is no "text-decoration: reverse" in CSS as it seems very awkward to achieve using JavaScript. I.E. set the element's foreground and background color to the background and foreground of the parent respectively.

  I noticed JavaScript techniques for that here

  Surely it's not that complicated?

  解决方案

  What are you calling reverted? Do you mean to set the background as the foreground color and vice versa? (Maybe it's a stupid comment, but if so it is not a decoration is it?)

  Anyway you're about to have a fight between DRY and MVC here :

  • either you declare a new CSS class each time you want to do that. That's redundant and painful, but you indeed separated the style from the code.

  Typically:

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

  • another option is to do that through javascript. Proxify suggested using jQuery.

    The result would probably look like that... (not tested)

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

  这篇关于CSS text-decoration：reverse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！