css margin 负数_使用CSS和Javascript使负数变为红色

最新推荐文章于 2022-04-23 22:24:40 发布

cunfusq0176

最新推荐文章于 2022-04-23 22:24:40 发布

阅读量484

点赞数

文章标签： java python javascript js html ViewUI

原文链接：https://www.hanselman.com/blog/making-negative-numbers-turn-red-using-css-and-javascript

版权

css margin 负数

A common thing one wants to do in a table of financial figures is to turn negative numbers red. Given that folks would rather use CSS than <font>, there's some conflicting thinking around the right way to do it.

一个人要在财务数据表中做的一件事是将负数变成红色。鉴于人们宁愿使用CSS也不愿使用<font>，围绕正确的方法存在一些相互矛盾的想法。

Some propose adding "negative" a css class like:

有人建议添加“负” css类，例如：

but others find that distasteful and say:

但其他人则感到讨厌，并说：

number is a data type.
数字是一种数据类型。
currency is both a presentational instruction and a sub-type of the number data type.
货币既是表示性指令，也是数字数据类型的子类型。
negative is neither type nor presentational — it’s dependent on the data value, not the type or the author’s formatting preference. It doesn’t belong there. [Xaprb]
否定既不是类型也不是表示形式-它取决于数据值，而不取决于类型或作者的格式设置偏好。 它不属于那里。 [ Xaprb ]

and go on to provide a clever CSS-only technique that works everywhere but IE6 (demo here).

并继续提供一种仅适用于CSS的聪明技术，除了IE6之外，该技术都可以在其他地方使用(此处演示)。

In the specific situation I've got, I'd like to make the change without changing any server-side code (which precludes adding a "negative" css class) and I need it to work everywhere (which nixes clever css).

在我遇到的特定情况下，我想在不更改任何服务器端代码的情况下进行更改(这使得不能添加“负” css类)，并且我需要它可以在任何地方工作(这消除了聪明的css)。

So, here's my not-so-clever Javascript solution (Warning, I'm not a Javascript guy so give Phil a few minutes and he'll no doubt include color commentary).

因此，这是我不太聪明的Javascript解决方案(警告，我不是Javascript专家，请给Phil几分钟，他无疑会提供颜色评论)。

<html>
<head>
    <style type="text/css">
     td.negative { color : red; }
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    function MakeNegative() {
        TDs = document.getElementsByTagName('td');
        for (var i=0; i<TDs.length; i++) {
                var temp = TDs[i];
                if (temp.firstChild.nodeValue.indexOf('-') == 0) temp.className = "negative";
            }
    }
    //-->
    </script>
</head>
<body>
 <table id="mytable">
  <caption>Some Financial Stuff</caption>
  <thead>
    <tr><th scope="col">Date</th><th scope="col">Money is good</th></tr>
  </thead>
  <tbody>
  <tr><td>2006-05-01</td><td>19.95</td></tr>
  <tr><td>2006-05-02</td><td>-54.54</td></tr>
  <tr><td>2006-05-03</td><td>34.45</td></tr>
  <tr><td>2006-05-04</td><td>88.00</td></tr>
  <tr><td>2006-05-05</td><td>22.43</td></tr>
  </tbody>
 </table>
    <script language="JavaScript" type="text/javascript">
  <!--
   MakeNegative();
  //-->
    </script>
</body>

May not be Web 2.0, and it likely doesn't please the standards wonks, but it works.

可能不是Web 2.0，它可能不符合标准要求，但可以使用。

UPDATE: Similar attempt seen here.

更新：这里有类似的尝试。

翻译自: https://www.hanselman.com/blog/making-negative-numbers-turn-red-using-css-and-javascript

css margin 负数

cunfusq0176

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css margin 负数_使用CSS和Javascript使负数变为红色

css margin 负数A common thing one wants to do in a table of financial figures is to turn negative numbers red. Given that folks would rather use CSS than <font>, there's some conflicting thinking ...
复制链接

扫一扫

css margin 负数_使用CSS和Javascript使负数变为红色

“相关推荐”对你有帮助么？