dom - Use JavaScript to change foreground and background color across the page - Stack Overflow

admin 管理员组

文章数量: 1086019

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.

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.

• javascript
• dom
• colors
• background-color

Share Improve this question Follow edited Dec 7, 2011 at 13:56 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked Dec 7, 2011 at 13:54 Ravi VyasRavi Vyas 12.4k66 gold badges3434 silver badges4747 bronze badges 6

• did you try with JQuery or any js libraries? – Sandeep G B Commented Dec 7, 2011 at 13:56
• JS libraries would probably do it the same way mentioned below; getElementsByTagName("*"). Until the HTML5 getElementsByClassName() is accepted across all browsers, there's no real clean way to acplish this. – Jeffrey Sweeney Commented Dec 7, 2011 at 13:59
• I am using it on android , thus eont be using Jquery or any JS library. – Ravi Vyas Commented Dec 7, 2011 at 14:01
• @RaviVyas what dose "eont" mean? – david Commented Dec 7, 2011 at 15:08
• @david its a typo .. sorry , it was supposed to be won't – Ravi Vyas Commented Dec 7, 2011 at 17:44

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

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>

It is possible. You can get all the elements within the wrapper div with by calling wrapper.getElementsByTagName("*") (wrapper being the wrapper element). Depending on the size of the site, that could be slow.

Yes, you could do something involving a two step approach whereby first you select all the target elements using an appropriate selector (e.g. "getElementById()" and "getElementsByTagName()") and then set their colors via the style attribute. For example:

// Select all elements whose color must be changed.
var els = [];
els.push(document.getElementById("item1"));
els.push(document.getElementById("item2"));
els.push(document.getElementById("item3")); // And so on...

// Set their new foreground and background colors.
for (var i=0; i<els.length; i++) {
  els[i].style.color = 'black'; // New foreground color.
  els[i].style.backgroundColor = 'white'; // New background color.
}

Also, consider using a JavaScript library such as jQuery with rich selector functionality; this could drastically simplify the first step.

I would strongly remend using wrapper.getElementsByTagName("*").style.backgroundColor = "purple";. This seems like the best solution given your constrains. Yes, getElementsByTagName("*") is going to be slow, but given that this is going to be on an Android device I believe it can easily handle this.

本文标签： domUse JavaScript to change foreground and background color across the pageStack Overflow