- The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it..
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Using a DOM function</title> <style> a {background-color:#eee;} a:hover {background:#ff0;} #toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;} </style> </head> <body> <h1>Using a DOM function</h1> <h2><a id="showhide" href="#">Show paragraph</a></h2> <p id="toggleMe">This is the paragraph that is only displayed on request.</p> <p>The general flow of the document continues.</p> <script> changeDisplayState = function (id) { var d = document.getElementById('showhide'), e = document.getElementById(id); if (e.style.display === 'none' || e.style.display === '') { e.style.display = 'block'; d.innerHTML = 'Hide paragraph'; } else { e.style.display = 'none'; d.innerHTML = 'Show paragraph'; } }; document.getElementById('showhide').onclick = function () { changeDisplayState('toggleMe'); return false; }; </script> </body> </html>
No comments:
Post a Comment