javascript - 如何根据事件给 `createTextNode`添加花式样式？

标签 javascript html css

我正在尝试向某些 document.createTextNode 变量添加特定样式。

例如，在下图中我们可以看到我正在处理的网页。

concept

我想做的是:

为了测试 HRDN-7230 和 HRDN-7220，将字体颜色更改为绿色并添加一些很酷的额外功能，例如绿色复选图片 (✓)。

例如:

enter image description here

我尝试了很多在互联网上找到的选项，但都没有成功。

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/

上一篇：javascript - 奇怪的 SVG 悬停行为

下一篇：html - 如果页面的特定宽度防止图像改变纵横比

相关文章：

javascript - 如何在不限制 'click' 、 'hover' 和 'select' 事件的情况下创建透明层？

css - 在不使用 Bootstrap 的 WP 模板中使用 Bootstrap

php - 在大型现有项目中包含 js 库之前需要考虑的事项

javascript - JS - 这个循环如何使浏览器崩溃？

javascript - Javascript 中的广度优先搜索

Javascript 显示/隐藏 Div + 在列表项上添加类

html - 解析 html 文件时 Fonduer max_storage_temp_tutorial 错误

html - 如何使图像在html中重复

JQuery UI 复选框 radio 堆叠在彼此之上而不是并排

html - 如何使用 google maps api 将第二行缩放到 100% 高度？

©2024 IT工具网  联系我们