昨天的报告页面，想要实现根据不同文字内容改变字体颜色，效果图：

调试了半天出不来效果，最后请教了前端，上代码：

         <!DOCTYPE html>

         <html lang="en">

         <head>

             <meta charset="UTF-8">

             <title>自动化测试报告</title>

             <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

             <h2 style="font-family: Microsoft YaHei">自动化测试报告</h2>

             <p class='attribute'><strong>测试结果 : </strong> 共 10，通过 9，失败 1</p>

             <style type="text/css" media="screen">

             body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}

         </style>

         </head>

         <body>

             <table id='result_table' class="table table-condensed table-bordered table-hover">

                 <colgroup>

                     <col align='left' />

                     <col align='right' />

                     <col align='right' />

                     <col align='right' />

                 </colgroup>

                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

                     <th>客户端及版本</th>

                     <th>通过率</th>

                     <th>开始时间</th>

                     <th>结束时间</th>

                 </tr>

         <tr class='failClass warning'>

             <td>快看小说 3.8.8</td>

             <td>99</td>

             <td>2019-04-19 10:33:47</td>

             <td>2019-04-19 10:33:47</td>

         </tr>

             <!-- 执行模块 -->

             <p class='attribute'><strong>测试详情 : </strong> 执行结果</p>

             <table id='result_table' class="table table-condensed table-bordered table-hover">

                 <colgroup>

                    <col align='left' />

                    <col align='right' />

                    <col align='right' />

                    <col align='right' />

                    <col align='right' />

                 </colgroup>

                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

                     <th colspan="2">业务模块</th>

                     <th>用例总数</th>

                     <th>通过数</th>

                     <th>状态</th>

                 </tr>

         <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

             <th></th>

             <th>模块1</th>

             <th>10</th>

             <th>10</th>

             <th class='demo' id="demo" >PASS</th>

         </tr>

         <tr class='failClass warning'>

             <td></td>

             <td>模块2</td>

             <td>20</td>

             <td>15</td>

             <td class='demo'  id="demo2">FAIL</td>

         </tr>

             </table>

             <script type="text/javascript">

                 //change color

                 //取都用demo的多组

                 var eles = document.getElementsByClassName('demo');

                 console.log(eles);

                 var x=document.getElementById("demo").innerText;

                 console.log("the value is :"+x);

                 //每组都应用样式

                 for(var i = 0; i < eles.length; i++){

                     if(eles[i].innerText == 'PASS'){

                         eles[i].style.color = 'green';

                     }else{

                         eles[i].style.color = 'red';

                     }

                 }

             </script>

         </body>

         </html>

感悟：我不太会用开发IDE，但是这次前端ll同学，用IDE几下就敲了很多代码，看来我也要赶快使用工具了。

页面样式修改：

代码：

         <!DOCTYPE html>

         <html lang="en">

         <head>

             <meta charset="UTF-8">

             <title>自动化测试报告</title>

             <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

             <h2 style="font-family: Microsoft YaHei">自动化测试报告</h2>

             <p class='attribute'><strong>测试结果 : </strong> 共 10，通过 9，失败 1</p>

             <style type="text/css" media="screen">

         body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}

         </style>

         </head>

         <body>

             <table id='result_table' class="table table-condensed table-bordered table-hover">

                 <colgroup>

                     <col align='left' />

                     <col align='right' />

                     <col align='right' />

                     <col align='right' />

                 </colgroup>

                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

                     <th>客户端及版本</th>

                     <th>通过率</th>

                     <th>开始时间</th>

                     <th>结束时间</th>

                 </tr>

         <tr class='failClass warning'>

             <td>快看小说 3.8.8</td>

             <td>99</td>

             <td>2019-04-19 13:53:35</td>

             <td>2019-04-19 13:53:35</td>

         </tr>

             </table>

             <!-- 执行模块 -->

             <p class='attribute'><strong>测试报告详情 : </strong> </p>

             <table id='result_table' class="table table-condensed table-bordered table-hover">

                 <colgroup>

                    <col align='left' />

                    <col align='right' />

                    <col align='right' />

                    <col align='right' />

                    <col align='right' />

                 </colgroup>

                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

                     <th colspan="2">功能模块</th>

                     <th>用例总数</th>

                     <th>通过数</th>

                     <th>状态</th>

                 </tr>

                 <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">

                     <th colspan="2">业务模块1</th>

                     <th>30</th>

                     <th>15</th>

                     <th class='demo' id="demo">FAIL</th>

                 </tr>

                 <tr class='failClass warning'>

                     <th></th>

                     <th>模块1</th>

                     <th>10</th>

                     <th>10</th>

                     <th class='demo' id="demo1">PASS</th>

                 </tr>

                 <tr class='failClass warning'>

                     <td></td>

                     <td>模块2</td>

                     <td>20</td>

                     <td>15</td>

                     <td class='demo'  id="demo2">Fail</td>

                 </tr>

             </table>

             <script type="text/javascript">

                 //change color

                 //取都用demo的多组

                 var eles = document.getElementsByClassName('demo');

                 console.log(eles);

                 //var x=document.getElementById("demo").innerText;

                 //console.log("the value is :"+x);

                 //每组都应用样式

                 for(var i = 0; i < eles.length; i++){

                     if(eles[i].innerText == 'PASS'){

                         eles[i].style.color = 'green';

                     }else{

                         eles[i].style.color = 'red';

                     }

                 }

             </script>   

         </body>

         </html>

HTML 1.1页面js修改文字颜色的更多相关文章

  1. NumberPicker设置宽度，设置文字颜色

    修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...

  2. Aspose.Word 操作word复杂表格 拆分单元格 复制行 插入行 文字颜色

    private void button3_Click(object sender, EventArgs e)         {             object savePathWord =&q ...

  3. input placeholder 文字颜色修改

    placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...

  4. 尝试在你浏览器的Console(F12)中运行一下，你会发现页面被不同的颜色块高亮了（css调试中学到的js）

    现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...

  5. js修改url参数，无刷新更换页面url

    一.js修改地址栏URL参数 function changeURLPar(destiny, par, par_value) { var pattern = par + '=([^&]*)'; ...

  6. Swift - 修改导航栏的样式（文字颜色，背景颜色，背景图片）

    默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...

  7. 修改static控件背景颜色和文字颜色

    当 static 控件或具有 ES_READONLY 风格的 edit 控件被绘制时,会向父窗口发送 WM_CTLCOLORSTATIC 消息.如果我们在窗口过程中处理该消息,就必须返回一个画刷句柄, ...

  8. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 动态修改ViewPagerIndicator CustomTabPageIndicator Tab标签文字颜色

    ViewPagerIndicator 的CustomTabPageIndicator 默认是没有Tab选中修改TextView颜色特效的. 可以通过以下方式实现: 新建viewpager_title_ ...

随机推荐

  1. cogs 167. [USACO Mar07] 月度花费

    167. [USACO Mar07] 月度花费 ★★   输入文件:expense.in   输出文件:expense.out   简单对比时间限制:1 s   内存限制:128 MB Farmer ...

  2. faster-rcnn代码阅读2

    二.训练 接下来回到train.py第160行,通过调用sw.train_model方法进行训练: def train_model(self, max_iters): ""&quo ...

  3. 配置JBOSS多实例

    在使用Jbossserver时.非常多情况我们须要配置多个实例,以下为大家介绍JBoss里怎样配置多实例,以Jboss5.1为例介绍. 1.复制${JBOSS_HOME}\server\default ...

  4. Python内置的字符串处理函数

    生成字符串变量 str='python String function'   字符串长度获取:len(str) 例:print '%s length=%d' % (str,len(str)) 连接字符 ...

  5. 垃圾回收GC:.Net自己主动内存管理 上(二)内存算法

    垃圾回收GC:.Net自己主动内存管理 上(二)内存算法 垃圾回收GC:.Net自己主动内存管理 上(一)内存分配 垃圾回收GC:.Net自己主动内存管理 上(二)内存算法 垃圾回收GC:.Net自己 ...

  6. bzoj5038 四叶草魔杖

    很有意思的最小生成树啊. 网上的题解大多是状压+最小生成树,经过我的试验,其实只要把每个联通块找出来,一个个做一次就可以了. 放一个状压的.懒得再写一个搜索找联通块 #include<cstdi ...

  7. hdu 1035（DFS)

    Robot Motion Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  8. 插入1000万条数据到mysql数据库表

    转自:https://www.cnblogs.com/fanwencong/p/5765136.html 我用到的数据库为,mysql数据库5.7版本的 1.首先自己准备好数据库表 其实我在插入100 ...

  9. JS文件中的中文在网页上显示为乱码解决方法

    转自:http://www.pc6.com/infoview/Article_63835.html 如果JS文件中的中文在网页上显示为乱码,不妨采用本文章中的方法来试一试,或许能解决使你很头疼的问题. ...

  10. PCB MS SQL CLR聚合函数(函数作用，调用顺序,调用次数) CLR说明

    用CLR写函数:标量函数,表值函数 很好理解,如果用聚合函数则不是那么好理解了, 这里将CLR函数说明一下,其实关键是对聚合函数说明 用CLR写聚合函数关键点,是要理解CLR与SQL是如何进行数据交互 ...