How do I update the color of an HTML element using javascript and the HTML DOM?

Question

I have the following javascript which I have hashed together from bits of code that I found on Stack Overflow (I'm no JavaScript expert!): -

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

You can see it not working in this JSFiddle.

What I want it to do is to change the color of all style attributes to "None". In other words I want to remove all color from the text.

I think that it might be something to do with passing by value rather than reference?

I've attached the IE debugger and I can see that after setting el.style.color = "None" the value of el.style.color is unchanged.

What is wrong here?

Answer 1

In CSS, value none is not valid.
You can use element.style.color="" (as said in comments) or element.style.color="black" (or any value you want).

Additionally, I'd recommend using classes and css instead of element.style.
This code:

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

Can be also written this way:

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

And then you can easily remove the class like element.classList.remove("black");

Answer 2

If you want the text to disappear, the only logical action that setting the color to none would do, then you should set the color to 'transparent', like so:

element.style.color = "transparent";

Though, if you just want to hide elements, a more performant way would be to set the element's display to none, like so:

element.style.display = "none";

Answer 3

This is a follow up. The answer that I was looking for was to set element.style.color="".

However when I tried to use this scipt in the markup of my ASP.NET web page, it didn't work in IE!?! I debugged it in Visual Studio and though it was not throwing any errors, the set property seemed to be having no effect.

I therefore modified the code and used the cssText property which I found in the debugger watch window in order to filter out certain values from the style by manipulating the csstext string as this JSFIDDLE shows.

      walk_the_DOM(wrapper, function(el) {
            {
                if (typeof el.style != "undefined") {
                    var attr = el.getAttribute("style");
                    if (attr != null) {
                        var attrs = attr.replace(/\s+/g, "").split(";");
                        attr = "";

                        for (var i = 0; i < attrs.length; i++) {
                            var propName = attrs[i].split(":")[0].toLowerCase();
                            if (propName != "" && propName != "background" && propName != "font-size" && propName != "color") {
                                attr += attrs[i] + "; "
                            };
                        };

                        if (attr == "") 
                            el.removeAttribute("style");
                        else el.setAttribute("style", attr);
                    };
                }
            }
        });