Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here's a way of achieving this in jQuery. You could choose to add a class to the body instead if you like, but remember to remove other classes first.</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=windows-1250"&gt; &lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#colour').change(function(){ $('body').css('background',$(this).val()); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="colour"&gt; &lt;option value=""&gt;Please Select &lt;option value="#00F"&gt;Blue&lt;/option&gt; &lt;option value="#F00"&gt;Red&lt;/option&gt; &lt;option value="#0F0"&gt;Green&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>or via classes:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=windows-1250"&gt; &lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#colour').change(function(){ $('body').removeClass('blue red green').addClass($(this).val()); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; .blue { background: #00F; } .green { background: #0F0; } .red { background: #F00; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;select id="colour"&gt; &lt;option value=""&gt;Please Select &lt;option value="blue"&gt;Blue&lt;/option&gt; &lt;option value="red"&gt;Red&lt;/option&gt; &lt;option value="green"&gt;Green&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

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