javascript - 如何使用 javascript 和 HTML DOM 更新 HTML 元素的颜色？

Question

我有以下 javascript，它们是我从 Stack Overflow 上找到的一些代码散列在一起的(我不是 JavaScript 专家!):-

        var walk_the_DOM = function walk(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walk(node, func);
            node = node.nextSibling;
        }
    };

    function myFunction() {
        var wrapper = document.createElement("pastedHtml");
        wrapper.innerHTML = "    <pre style=\"font-family: Consolas; background: white; color: black; font-size: 13px\"data-listid>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: blue\" data-listid>&lt;</span><span style=\"color: maroon\" data-listid>telerik</span><span style=\"color: blue\" data-listid>:</span><span style=\"color: maroon\" data-listid>EditorTool</span>&nbsp;<span        style=\"color: red\" data-listid>Name</span><span style=\"color: blue\" data-listid>=</span><span            style=\"color: blue\" data-listid>\"Cut\"</span>&nbsp;<span style=\"color: blue\" data-listid>/&gt;</span> </pre>";

        walk_the_DOM(wrapper, function(el) {
            {
                if (typeof el.style != "undefined") {
                    el.style.color = "None";
                }
            }
        });

        document.getElementsByTagName("UL")[0].appendChild(wrapper);
    }

您可以看到它在这个 JSFiddle 中不起作用.

我想要它做的是将所有样式属性的颜色更改为“无”。换句话说，我想从文本中删除所有颜色。

我认为这可能与按值传递而不是引用有关？

我已经附加了 IE 调试器，我可以看到在设置 el.style.color = "None"之后，el.style.color 的值没有改变。

这里有什么问题？

Answer 1

在 CSS 中，值 none 无效。
您可以使用 element.style.color=""(如评论中所述)或 element.style.color="black"(或您想要的任何值)。

此外，我建议使用类和 css 而不是 element.style。
这段代码:

<script>
 element.style.color = "black";
</script>

也可以这样写:

<style>
 .black{
  color: black;
 }
</span>
<script>
 element.classList.add("black");
</script>

然后您可以像 element.classList.remove("black");

这样轻松删除类