Forum:Button that will apply css style

would it be possible to write a javascript routine (placed in the site-wide javascript page) that would allow one to click a button and apply a given style to that page?

One could have multiple buttons on the page and each would cause certain elements to take on a given color or not be displayed at all.

Something similar to the collapsible tables button. The code for this button looks like

Granpa 04:31, December 24, 2011 (UTC)


 * I don't see why not. Maybe you could have something like:

turn blue box green
 * ...of course, I don't know if MediaWiki would actually let that work. 04:44, December 24, 2011 (UTC)

Lets see

turn blue box green

span with id=blueBox

div with id=blueBox

Granpa 07:02, December 24, 2011 (UTC)


 * Nope, looks like MediaWiki removes the onclick. Of course, you could always use verbatim tags. 07:08, December 24, 2011 (UTC)


 * Yes! It works. Thats fabulous. Thank you. Granpa 07:19, December 24, 2011 (UTC)


 * But it only turns the first element with id=blueBox green. Granpa 07:21, December 24, 2011 (UTC)


 * The code for changing attributes for multiple elements is a little bit harder. Maybe jQuery? I'm new at this, but I think the code would be:

$(".blueBox").css("background-color","green"); 07:54, December 24, 2011 (UTC)


 * I tried that and it had no effect.
 * I was thinking more along the lines of adding a javascript routine to the site-wide javascript page and calling it from the button like it does for collapsible tables.




 * Granpa 08:02, December 24, 2011 (UTC)

heres a routine I got a long time ago that redirects all new links to wikipedia:

Granpa 08:14, December 24, 2011 (UTC)


 * Yes, and that would work perfectly fine, but the part I'm worried about is that HTML links are against the rules of WikiMarkup (which is why my original reply was a div with an onclick instead). I can't see a way to make that work with the normal link markup. I would doubt  does anything. But you could do that with onclick too. It would just be  . 08:21, December 24, 2011 (UTC)


 * At the risk of sounding really stupid, I dont know how to write a javascript routine to do this. I assume I would first create an array of all the elements with the given class (or id) and then loop through that array applying the css to each element. I know how to use css. I use it all the time. Its just javascript I dont know about. Granpa 01:31, December 25, 2011 (UTC)


 * No worries, I'm a beginner at JS myself. Not having a very deep understanding of jQuery, I would write it something like this if I wanted to be able to pick which one I colored:

function turnBoxGreen(boxnumber) { document.getElementsByClassName('blueBox')[boxnumber].style.background = 'green'; }


 * That way, the links could just say  to turn blue box number 8 blue. Or, if you want to turn them all blue simultaneously, use jQuery:

function turnAllBoxesGreen { $(".blueBox").css("background-color","green"); }
 * I hope I understood your question correctly. 04:40, December 25, 2011 (UTC)


 * Its working beautifully. :-) Granpa 07:11, December 25, 2011 (UTC)