如何根据事件为`createTextNode`添加花哨的样式？
我正在尝试为某些document.createTextNode变量添加特定样式。
例如，在下图中我们可以看到我正在处理的网页。
我想做的是以下内容：
对于测试HRDN-7230和HRDN-7220，将字体颜色更改为绿色，并添加一些很酷的额外功能，如绿色检查图片（✓）。
例如：
我尝试了很多在互联网上找到的选项而没有成功。
hardening.html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="../css/tabletest.css" type="text/css" media="screen">
</head>
<body>
<section class="mainArea" align="center">
<H1><CENTER>HARDENING TESTS AND SUGGESTIONS</H1></CENTER>
<div class="testTable" id="testTable">
<script>
var testsRecovered = localStorage.getItem("tests");
var suggestionsRecovered = localStorage.getItem("suggestions");
var testsParsed = [], suggestionsParsed = [];
if (testsRecovered != null || suggestionsRecovered != null){
/*Suggestions parsing*/
var aux = suggestionsRecovered.split(/,(?=s)/);
for (var i = 0; i < aux.length; i++) {
var splitI = aux[i].split("|");
var joinString = splitI[0] + " " + splitI[1];
var suggestionParsed = joinString.replace("suggestion[]=", "");
suggestionsParsed.push(suggestionParsed);
}
/*Test parsing */
testsParsed = testsRecovered.split("|");
testsParsed[0] = testsParsed[0].replace("tests_executed=", "");
//localStorage clear
//window.localStorage.clear();
}
var body = document.getElementById('testTable');
var table = document.createElement('table');
body.appendChild(table);
var tr = document.createElement('tr');
table.appendChild(tr);
var td = document.createElement('td');
var td2 = document.createElement('td');
tr.appendChild(td);
tr.appendChild(td2);
var txt = document.createTextNode('Test ID');
var txt2 = document.createTextNode('Status');
td.appendChild(txt);
td2.appendChild(txt2);
for (var i = 0; i < testsParsed.length; i++) {
if(testsParsed[i].includes("HRDN")){
var tr2 = document.createElement('tr');
table.appendChild(tr2);
var td3 = document.createElement('td');
var td4 = document.createElement('td');
tr2.appendChild(td3);
tr2.appendChild(td4);
for (var j = 0; j < suggestionsParsed.length; j++) {
if(suggestionsParsed[j].includes(testsParsed[i])){
var txt4 = document.createTextNode(suggestionsParsed[j]);
}
else{
var txt4 = document.createTextNode("TEST PASSED");
}
}
var txt3 = document.createTextNode(testsParsed[i]);
td3.appendChild(txt3);
td4.appendChild(txt4);
}
}
</script>
</div>
</section>
<!-- MENU -->
<div class="container">
<ul id="nav">
<li><a href="#"><img src="../images/t1.png" /> Dashboard</a></li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="llog.html"><img src="../images/empty.gif" />LYNIS LOG</a></li>
<li><a href="#"><img src="../images/empty.gif" />LYNIS REPORT</a></li>
</ul>
</li>
<li><a href="#" class="sub" tabindex="1"><img src="../images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="#"><img src="../images/empty.gif" />Accounting</a></li>
<li><a href="#"><img src="../images/empty.gif" />Authentication</a></li>
<li><a href="#"><img src="../images/empty.gif" />Banner</a></li>
<li><a href="#"><img src="../images/empty.gif" />Boot</a></li>
<li><a href="#"><img src="../images/empty.gif" />Crypto</a></li>
<li><a href="#"><img src="../images/empty.gif" />File Integrity</a></li>
<li><a href="#"><img src="../images/empty.gif" />Firewall</a></li>
<li><a href="#"><img src="../images/empty.gif" />Hardening</a></li>
<li><a href="#"><img src="../images/empty.gif" />Kernel</a></li>
<li><a href="#"><img src="../images/empty.gif" />Logging</a></li>
<li><a href="#"><img src="../images/empty.gif" />Mail</a></li>
<li><a href="#"><img src="../images/empty.gif" />Malware</a></li>
<li><a href="#"><img src="../images/empty.gif" />Nameservers</a></li>
<li><a href="#"><img src="../images/empty.gif" />Networking</a></li>
<li><a href="#"><img src="../images/empty.gif" />PHP</a></li>
<li><a href="#"><img src="../images/empty.gif" />Printing</a></li>
<li><a href="#"><img src="../images/empty.gif" />Processes</a></li>
<li><a href="#"><img src="../images/empty.gif" />Shell</a></li>
<li><a href="#"><img src="../images/empty.gif" />Software</a></li>
<li><a href="#"><img src="../images/empty.gif" />Squid</a></li>
<li><a href="#"><img src="../images/empty.gif" />SSH</a></li>
<li><a href="#"><img src="../images/empty.gif" />Storage</a></li>
<li><a href="#"><img src="../images/empty.gif" />Time</a></li>
<li><a href="#"><img src="../images/empty.gif" />Tooling</a></li>
<li><a href="#"><img src="../images/empty.gif" />Web</a></li>
</ul>
</li>
<li><a href="#"><img src="../images/t2.png" />Overview</a></li>
</ul>
</div>
<!-- END MENU -->
</body>
</html>
tabletest.css：
.testTable {
margin:0px;padding:0px;
width:100%;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
}.testTable table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.testTable tr:last-child td:last-child {
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
}
.testTable table tr:first-child td:first-child {
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
}
.testTable table tr:first-child td:last-child {
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
}.testTable tr:last-child td:first-child{
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
}.testTable tr:hover td{
background-color:#d3e9ff;
}
.testTable td{
vertical-align:middle;
background-color:#aad4ff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:20px;
color:#000000;
}.testTable tr:last-child td{
border-width:0px 1px 0px 0px;
}.testTable tr td:last-child{
border-width:0px 0px 1px 0px;
}.testTable tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.testTable tr:first-child td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:#0057af;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.testTable tr:first-child:hover td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:#0057af;
}
.testTable tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.testTable tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
1 个答案:
答案 0 :(得分：0)
将刻度线标记添加到文本节点：
javafx.application.Application.launch(Chart.class);
然后将颜色应用到var txt4 = document.createTextNode("TEST PASSED ✓");
td4如果只想要HRDN-7230和HRDN-7220的颜色，请添加条件
td4.style.color = "green";
如果您想要添加图片，请创建图像元素而不是文本节点
if (txt3 == 'HRDN-7230' || txt3 == 'HRDN-7220') {
td4.style.color = "green";
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？