Question

I am supposed to display html data in an Android Webview. I am able to change the body foreground, background colour using a wrapper div tag but I still have colour values defined in internal style tags.

Can I use a JS function to iterate through DOM and change all colour and background-color values after loading the page?

Initially I was trying to user regex to replace the values but there is a possibility that the data being displayed is HTML which I don’t want to break.

Answer 1

Here is a sample script for changing background color on page load for all “divs” that have background color style. The approach would be needed for all other types of elements that for which background color need to be changed.

<script type="text/javascript">

    window.onload = onWindowLoad();
    function onWindowLoad() {
        var divs = document.getElementsByTagName("div");
        for (i = 0; i < divs.length; i++) {
            if (divs[i].style.backgroundColor != null && divs[i].style.backgroundColor != "") {
                divs[i].style.backgroundColor = "Blue";
            }           
        }
    }
</script>