e.g. drop-downs, form elements, etc.
We can manipulate CSS from JavaScript as well as the HTML / DOM
// JavaScript function setBackgroundColour(colour) { document.body.style.background = colour; } function setElementBackgroundColour(element, colour) { document.getElementById(element).style.background = colour; } <!-- The HTML --> <div id='bg' style='border: 1pt solid black; padding: 2em; margin: 0 0 2em 0;'> <button onclick="setBackgroundColour('#CCCCCC')">Grey body</button> <button onclick="setBackgroundColour('#FFFFFF')">White body</button> <button onclick="setElementBackgroundColour('bg','#FF0000')">Red div</button> <button onclick="setElementBackgroundColour('bg','#FFFFFF')">White div</button> </div>
[Download]
We can use the same approach to hide or show a div:
// JavaScript function showElement(element) { document.getElementById(element).style.display = 'block'; } function hideElement(element) { document.getElementById(element).style.display = 'none'; } function toggleElement(element) { if(document.getElementById(element).style.display == 'none') { showElement(element); } else { hideElement(element); } } <!-- The HTML --> <button onclick="toggleElement('showHide');">Toggle</button> <div id='showHide' style='background: red; padding: 2em; margin: 2em; display: none'> Some content! </div>
[Download]
We can also use this approach to 'grey out' elements in a form:
// JavaScript function deactivateElement(element) { document.getElementById(element).disabled = true; } function activateElement(element) { document.getElementById(element).disabled = false; } <!-- The HTML --> <form action='#' method='get'> <h3>Sequence analysis</h3> <p>Enter your name and the sequence to be analyzed, then select the sequence type and the types of analysis to be performed.</p> <h4>Enter your data...</h4> <p>Name:<br /> <input type='text' name='username' size='30' /></p> <p>Sequence: <br /> <textarea name='seq' cols='60' rows='5'></textarea></p> <p>Sequence Type: <input type='radio' name='dnaprot' value='protein' checked='checked' onclick='activateElement("ss");'/> Protein <input type='radio' name='dnaprot' value='dna' onclick='deactivateElement("ss");'> DNA</p> <p>Analysis types:<br /> <input type='checkbox' name='ss'/> Hydrophobicity<br /> <input type='checkbox' name='access'/> Accessibility<br /> <input type='checkbox' name='ss' id='ss' /> Secondary Structure Prediction<br /> </p> <p><input type='submit' value='Submit'/> <input type='reset' value='Clear form'/> </p> </form>
[Download]