- 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/
我喜欢调整 目录的样式(例如背景颜色、字体)预订 , Gitbook 风格 HTML 文档。 这可能吗?如果是这样,有人可以善意地指出我可以开始这样做的地方吗? 谢谢你。 最佳答案 两个步骤: 1)
是否可以使用纯 CSS 选择器根据子节点的兄弟节点数量为节点子节点(在我的例子中为 UL)提供不同的属性,特别是高度? 例如,如果一个节点有 1 个子节点,则 UL 的高度是自动的,但是如果该节点有
我正在与 Vala 一起工作,它首先编译为 C,然后正常从 C 编译。 valac 的一项功能(Vala 编译器)是为 .vala 生成“fast-vapi”文件。 fast-vapi 本质上是为 .
我有两个具有 .body 类的 div,但是,一个位于另一个具有 .box 类的 div 中 - 如下所示: 我只想为 .box 内部的 .body 设置样式...但我在下面所
**注意所有 <> 标签已被删除以允许代码显示**我已经玩了好几个小时了,如果不在设计结束时使用解决方法(即 Corel 绘图),我就无法真正让它工作 *在我继续之前, 首先,网站 URL 是 Adv
我从一个服务中接收到一个字符串,该字符串显然使用 UTF-32 编码对其 unicode 字符进行编码,例如:\U0001B000(C 风格的 unicode 编码)。但是,为了在 JSON 中序列化
我在应用程序资源中有一种样式,我想将其应用于许多不同的饼图。样式如下所示: 为了简单起见,我排除了更多的属性。这一切都很好。现在,我的一些馅饼需要有一个不同的“模型
想象一下,我有一个名为“MyCheckBoxStyle”的 CheckBox 自定义样式。 如何制作基于 MyCheckBoxStyle 嵌入自定义 DataGridCheckBoxColumn 样式
我有一个 Button我在 WPF 中开发的样式,如 this question 中所述.我想用这种风格做的另一件事是拥有 Button缩小一点点,使其看起来像被点击一样被点击。现在,转换代码如下所示
我为超链接控件创建了一个样式:
不知道为什么,但我的 typeahead.js 远程自动完成停止工作。我没有更改任何关于 typeahead.js 的代码,但既然它坏了,我一定是错的。你能看看我的site here吗? ?我会创建
有没有办法创建扩展当前样式的样式,即不是特定样式? 我有一个 WPF 应用程序,我在其中创建样式来设置一些属性,例如边框或验证。 现在我想尝试一些主题,看看哪
我正在为一个网站提出问题,并希望 var reltext 中的正确/再试消息具有不同的颜色,即绿色表示正确,红色表示错误,并且每个旁边可能有一个小 png。 有什么想法吗? A local co
我想到达列表的父节点(使用 id 选择器)并使用纯 JavaScript 添加背景颜色来设置其样式。这是我的代码,但不起作用。 var listParentNode; listPare
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 4 年前。 Improve th
过去几天我一直在与这段代码作斗争,我真的不知道该如何处理它。 基本上,当用户将鼠标滚动到主导航菜单中的某个 LI 元素上时,就会运行一个 Javascript 函数,并根据触发该函数的元素将链接放入下
使用这个可爱的 html 和 css 作为指南,我能够在我的照片上显示我的姓名首字母。 这很好,但是,如果图像不存在,我只想显示首字母;如果图像存在,则不应渲染 peron 首字母。 换句话说,当该图
使用这个可爱的 html 和 css 作为指南,我能够在我的照片上显示我的姓名首字母。 这很好,但是,如果图像不存在,我只想显示首字母;如果图像存在,则不应渲染 peron 首字母。 换句话说,当该图
是否有人尝试过将 JButton 设计为看起来像 NetBeans 工具栏按钮?这将只显示一张图片,当您将鼠标悬停在它上面时,会显示 1px 圆形角灰色边框,并且按钮顶部和底部的背景不同......似
在 Ax2012 中使用图表,它们工作正常。但我想更改它在启动时显示的图表类型,例如“样条”图表,而不是默认的“柱状图”图表。 这是我现在拥有的: http://i.stack.imgur.com/R
我是一名优秀的程序员,十分优秀!