JavaScript-DOM/js-dom.html at master · rwiza123/JavaScript-DOM · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>docu</title>
</head>

<body>


<p id = "demo">Developers for life</p>
<img id ="myDIV" src ="lib\images\fist.png" width="300" height="300">
<br>
<br>

<button type = "button" onclick="myFunction1()">Set font size Big</button>
<button type = "button" onclick="myFunction2()">Set font size small</button>
<button type = "button" onclick="myFunction3()">Hide img</button>
<button type = "button" onclick="myFunction()">Print text</button>


<script>
 function myFunction() {
  var h = document.createElement("p");
  var t = document.createTextNode("we are coders");
  h.appendChild(t);
  document.body.appendChild(h);

}

function myFunction1() {
  document.getElementById("demo").style.fontSize = "large";
  document.getElementById("demo").style.color = "blue"
}

function myFunction2() {
  document.getElementById("demo").style.fontSize = "small";
  document.getElementById("demo").style.color = "green"
}

function myFunction3() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none"){
    x.style.display = "block";
  }else {
    x.style.display = "none";
  }
  }


</script>


</body>
</html>