Question

我正在尝试为某些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;
}

Answer 1

将刻度线标记添加到文本节点：

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";
}

如何根据事件为`createTextNode`添加花哨的样式？

1 个答案: