- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试向某些 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;
}
最佳答案
将刻度标记添加到文本节点:
var txt4 = document.createTextNode("TEST PASSED ✓");
然后将颜色应用到您的td4
td4.style.color = "green";
如果您只想要 HRDN-7230 和 HRDN-7220 的颜色,请添加条件
if (txt3 == 'HRDN-7230' || txt3 == 'HRDN-7220') {
td4.style.color = "green";
}
如果您想添加图像而不是创建图像元素而不是文本节点
var txt4 = document.createElement("IMG");
txt4.src = "passed.png";
关于javascript - 如何根据事件给 `createTextNode`添加花式样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36742557/
我想使用按钮将选择列表添加到我的网站。我需要使用节点,因为我需要能够在 DOM 中访问它,以便稍后可以检索它的值,因此我无法使用 innerHTML。 我的问题是 createTextNode 似乎用
我在学校有一项作业,要求在 JavaScript 执行时编写网页的 DOM。我们在纸上得到了作业,当我尝试在 sublime 上编写并运行它时,代码无法工作。我认为问题是在以下几行: tdTextNo
字符我正在尝试在 XML 文档文本节点中包含正确的字符: Element request = doc.createElement("requestnode"); request.appendChild
我需要通过 CreateTextNode 处理一些文本,因为它可能包含特殊字符。 我想知道什么相当于: /* var status holds some text */ contentStatus
我想在 div 中创建一个新段落: 我想在段落中使用新行。我使用\n 转义它们,但它们正在创建新行。我做错了什么? var oNewP = document.createElement("p"); v
使用这个去掉我的换行符 是否有替代方案可以呈现 html? function viewCommentToggle( comment ) { theRow = document.getElem
所以现在我正在处理一个动态添加内容的列表。所以到目前为止我有这段代码,这是我的 javascript $("#textBox").keypress(function(e) { if(e.keyCode
所以我有一个字符串数组(通常包含 HTML 代码),例如: var array = ["", "", "", "First Name"....]; 我正在使用该数组创建一个串联字符串: var htm
现在我正在尝试弄清楚如何根据用户在输入文本字段中输入的内容将 CREATED 文本附加到 CREATED p 元素。如果我在 createTextElement 方法之后设置文本,则当我单击按钮时它会
有没有办法在'createTextNod'中插入HTML标签或者我还能做什么 $.each(JSON.parse(results), function(i, field){ f
我有一个过滤方法,它返回数组的键和值。现在我得到了完整的 url,但我需要将它包装在标签中,这样我就可以将 url 传递给它的 href。过滤方法: let filtered = myData.map
我正在尝试使用 js 使用 createTextNode() 打印列表的第一个子项并创建一个 h1。我希望我的句子是“蓝色?很棒的颜色”。然而我的句子是读[宾语][宾语]?颜色很棒。如何正确使用列表中
我显然错过了一些真正明显的关于createTextNode和createElement如何工作的东西 - 我有 a very simple test在 div 中显示“Hello World”,但它不
我正在尝试向某些 document.createTextNode 变量添加特定样式。 例如,在下图中我们可以看到我正在处理的网页。 我想做的是: 为了测试 HRDN-7230 和 HRDN-7220,
我需要更改由 createTextNode() 函数创建的元素的字体: var s = document.createTextNode(item.text); s.setAttribute("font
我要向表中添加几千行,因此我需要 native javascript 的速度。 目前我正在使用: nThName = document.createElement("TH"); nThName.app
所以我一直在用原生 javascript 慢慢替换我的许多普通 jQuery 代码,我偶然发现了 document.createTextNode() 和 related MDN documentati
我正在尝试使用 Jasmine 和 jsdom 为 HTML 组件编写 UI 测试。在我的组件中,我使用 createTextNode 生成 DOM 元素的内容。 然而,当测试运行时,document
我在这里得到了这个真正简单的代码: Try it var sth = document.getElementById("haha").value; function myFunct
/n不适用于我的代码,因为它不打印出换行符。请帮忙! 不起作用 var x = document.createElement("TABLE"); x.setAttri
我是一名优秀的程序员,十分优秀!