Databases
StackOverflow2013
Postsdbo
POHow can I use greasemonkey and javascript to change the colour of every letter on a page to a randomly selected one?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use greasemonkey and javascript to change the colour of every letter on a page to a randomly selected one?
    text
    copied!<p>So I've read a few similar questions, and I've managed to do things like change the background colour, but I have not yet been able to get this to work;</p> <p>What I want, is for each subsequent letter on a page to be randomly coloured. The colour space used isn't really important, as that's easy to fix once it actually works (am using <a href="https://stackoverflow.com/a/1484514/432913">this</a> one at the moment), but I can't even get the text to change colour yet. I'm hoping I'm just making a silly mistake somewhere...</p> <p>This is what i'm trying at the moment; and it <em>kind of</em> works, but it's very dependant on what tagName i use, and because of the nature of most webpages, it can break a lot of things if i'm not careful...</p> <p><a href="http://jsfiddle.net/bXZZQ/" rel="nofollow noreferrer">jsFiddle</a></p> <pre><code>var elements = document.getElementsByTagName('p'); for(var i=0,l=elements.length;i&lt;l;++i) { var str = elements[i].textContent; elements[i].innerHTML = ''; for(var j=0,ll=str.length;j&lt;ll;++j) { var n = document.createElement('span'); elements[i].appendChild(n); n.textContent = str[j]; n.style.color = get_random_colour(); } } function get_random_colour() { var letters = '0123456789ABCDEF'.split(''); var colour = '#'; for (var i = 0; i &lt; 6; i++ ) { colour += letters[Math.round(Math.random() * 15)]; } return colour; }​ </code></pre> <p>In this example, p works fine, and doesn't seem to break anything, but if I do <code>*</code> or <code>html</code> or <code>body</code> then it breaks the page. Is there a way to get all the text on the page, and not break it?</p> <p>And another thing; I later changed the colour function to <em>hopefully</em> only pick colours that are in HSV(random,1,1) so that i only get nice bright colours, but it's not working. I'm presuming I just have some JS error in there, but I'm not that familiar with JS, so I'm finding it hard to find...</p> <p><a href="http://jsfiddle.net/bXZZQ/1/" rel="nofollow noreferrer">Here</a> are the changes</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload