Repository-Suppository/display_v_visibility.html at master · LinearSix/Repository-Suppository · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<h2><p id="demo1">JavaScript can remove HTML elements.</p></h2>

<p>Using &ldquo;style.display=&lsquo;none&rsquo;&rdquo; eliminates the HTML element and its occupied space.</p>
<p><button type="button" onclick="document.getElementById('demo1').style.display='none'">display=none</button></p>
<p>Using &ldquo;style.display=&lsquo;inline&rsquo;&rdquo; returns the HTML element and its occupied space to default value.</p>
<p><button type="button" onclick="document.getElementById('demo1').style.display='inline'">display=inline</button></p>

<h2><p id="demo2">JavaScript can hide HTML elements.</p></h2>

<p>Using &ldquo;style.visibility=&lsquo;none&rsquo;&rdquo; hides the HTML element but leaves its occupied space.</p>
<p><button type="button" onclick="document.getElementById('demo2').style.visibility='hidden'">visibiliy=hidden</button></p>
<p>Using &ldquo;style.visibility=&lsquo;none&rsquo;&rdquo; reners the HTML element and its occupied space.</p>
<p><button type="button" onclick="document.getElementById('demo2').style.visibility='visible'">visibiliy=visible</button></p>

</body>
</html>