| HTML |
|---|
 |
|
HTML and variants |
|---|
|
|
|
HTML elements and attributes |
|---|
|
|
|
Editing |
|---|
|
|
|
Character encodings and language |
|---|
|
|
|
Document and browser technology |
|---|
|
|
|
Client-side scripting and APIs |
|---|
|
|
|
Web3D technology |
|---|
|
|
|
Standardizations |
|---|
|
|
|
Comparisons |
|---|
|
|
<!DOCTYPE html>
<html>
<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:30px0;padding:1em;}
</style>
</head>
<body>
<h1>Using a DOM function</h1>
<h2><a id="showhide" href="#">Show paragraph</a></h2>
<p id="toggle-me">This is the paragraph that is only displayed on request.</p>
<p>The general flow of the document continues.</p>
<script>
functionchangeDisplayState(displayElement,textElement){
if(displayElement.style.display==="none"||displayElement.style.display===""){
displayElement.style.display="block";
textElement.innerHTML="Hide paragraph";
}else{
displayElement.style.display="none";
textElement.innerHTML="Show paragraph";
}
}
letdisplayElement=document.getElementById("toggle-me");
lettextElement=document.getElementById("showhide");
textElement.addEventListener("click",function(event){
event.preventDefault();
changeDisplayState(displayElement,textElement);
});
</script>
</body>
</html>
Document Object Modeledit |
