HTML 1.1页面js修改文字颜色
昨天的报告页面，想要实现根据不同文字内容改变字体颜色，效果图：
调试了半天出不来效果，最后请教了前端，上代码：
<!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修改文字颜色的更多相关文章
- NumberPicker设置宽度，设置文字颜色
修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...
- Aspose.Word 操作word复杂表格 拆分单元格 复制行 插入行 文字颜色
private void button3_Click(object sender, EventArgs e) { object savePathWord =&q ...
- input placeholder 文字颜色修改
placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...
- 尝试在你浏览器的Console(F12)中运行一下，你会发现页面被不同的颜色块高亮了（css调试中学到的js）
现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...
- js修改url参数，无刷新更换页面url
一.js修改地址栏URL参数 function changeURLPar(destiny, par, par_value) { var pattern = par + '=([^&]*)'; ...
- Swift - 修改导航栏的样式（文字颜色，背景颜色，背景图片）
默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...
- 修改static控件背景颜色和文字颜色
当 static 控件或具有 ES_READONLY 风格的 edit 控件被绘制时,会向父窗口发送 WM_CTLCOLORSTATIC 消息.如果我们在窗口过程中处理该消息,就必须返回一个画刷句柄, ...
- js文字颜色闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 动态修改ViewPagerIndicator CustomTabPageIndicator Tab标签文字颜色
ViewPagerIndicator 的CustomTabPageIndicator 默认是没有Tab选中修改TextView颜色特效的. 可以通过以下方式实现: 新建viewpager_title_ ...
随机推荐
- BZOJ——T 1800: [Ahoi2009]fly 飞行棋
Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1767 Solved: 1395[Submit][Status][Discuss] Descripti ...
- Spring MVC-集成（Integration）-生成JSON示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_json.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如 ...
- CF #328div2 D
这题不难,当时想出来了,可是却写不出来~~ 现在慢慢写回来,也写得好挫~ 可以知道,被攻击的城市必定可以组成一棵树,然后,传送到的点必定也是城市之一.如果出发后回到原点,则需要2E,E是树的边数,则2 ...
- HDU 5433
每次BC都好心酸... BFS+queue..状态可以设为p_val[x][y][k],加上斗志的值. #include <iostream> #include <cstdio> ...
- [Windows]_[0基础]_[Release程序的崩溃报告minidump解决方式]
场景: 1. Release的程序崩溃时,崩溃报告能够让开发者查明代码哪里出了问题,用处大大的. 2. 仅仅实用VS的编译器才支持,所以MinGW就无缘了. 3. 使用了未处理异常过滤处理函数. 4. ...
- XMPP基本内容简单介绍
即时通讯技术简单介绍 即时通讯技术(IM)支持用户在线实时交谈.假设要发送一条信息,用户须要打开一个小窗体,以便让用户及其朋友在当中输入信息并让交谈两方都看到交谈的内容.有很多的IM系统,如AOL I ...
- 创建hive整合hbase的表总结
[Author]: kwu 创建hive整合hbase的表总结.例如以下两种方式: 1.创建hive表的同步创建hbase的表 CREATE TABLE stage.hbase_news_compan ...
- ubuntu中eclipse无法识别android手机问题
1.问题: 在ubuntu中eclipse中用真机来调试androi程序时,发现无法识别手机,例如以下图显示2.37一栏之前显示全是乱码.这是解决后截的图. 2.问题原因: 在window下我们能够通 ...
- js面试题--------JS中数字和字符,布尔类型相加相减问题
JS中数字和字符相加相减问题 <html lang="en"> <head> <meta charset="utf-8" /> ...
- oc59--匿名分类
// // main.m // 匿名分类(延展) // 可以为某个类扩展私有的成员变量和方法,写在.m文件中, // 分类不可以扩展属性,分类有名字,匿名分类没有名字. #import <Fou ...