-
Notifications
You must be signed in to change notification settings - Fork 1
/
affectingDOM.html
143 lines (124 loc) · 5.09 KB
/
affectingDOM.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<meta charset="utf-8" />
<style>
body {
background: #222;
color: #fff;
font-family: Arial, Helvetica, sans-serif
}
p {
margin: 12px;
color: darkred;
background-color: lightgray;
width: 80%;
align-self: center;
box-sizing: border-box;
padding: 3px;
}
h2 {
display: inline-block;
margin: 0;
}
</style>
<script>
var someColors = ["black", "green", "blue", "yellow"];
function createTable() {
var counter = 1;
var para = document.getElementById('inledning');
var tbl = document.createElement('table');
tbl.style.width = '100%';
var tbdy = document.createElement('tbody');
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 4; j++) {
var td = document.createElement('td');
td.style.border = "1px solid blue";
td.appendChild(document.createTextNode('some text ' + ++counter))
tr.appendChild(td)
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
para.appendChild(tbl)
}
function boldStyle(obj) {
obj.style.fontWeight = "bold";
}
function regularStyle(obj) {
obj.style.fontWeight = "normal";
}
function activeHeader(lmnt) {
var syster = lmnt.previousElementSibling;
syster.style.border = "1px solid red";
lmnt.style.border = "1px solid red";
lmnt.onmouseout = 'passiveHeader(this)'
}
function passiveHeader(lmnt) {
alert("asdfasd");
var syster = lmnt.previousElementSibling;
syster.style.border = "none";
lmnt.style.border = "none";
}
function changeAllp() {
var alla_p = document.getElementsByTagName("p");
for (var i = 0; i < alla_p.length; i++) {
if (i % 2) { // noll tolkas som false allt annan som true
alla_p[i].style.color = "black";
alla_p[i].style.border = "3px dotted yellow";
alla_p[i].style.padding = "0px";
} else {
alla_p[i].style.color = "darkred";
alla_p[i].style.border = "none";
}
}
}
</script>
<body>
<h3>Alla färger</h3>
<div id="colorList"></div>
<h2>Paragraph 1</h2>
<p id="inledning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque sed pellentesque nibh, nec accumsan risus.
Quisque non tempor orci. Sed interdum purus fermentum elementum facilisis. Proin blandit turpis eget dui
vehicula, nec elementum sapien dignissim.
</p>
<h2>Paragraph 2</h2>
<p id="main" onmouseover="activeHeader(this);" >
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque quis iaculis
neque, et sodales nisi. Nullam quam metus, tincidunt in semper non, suscipit dictum erat. Nullam ullamcorper
elementum consectetur.
</p>
<h2>Paragraph 3</h2>
<p id="main2" onmouseover="boldStyle(this);" onmouseout="regularStyle(this);">
Praesent sollicitudin placerat velit, nec mattis augue rutrum quis. Nulla pulvinar, odio non ornare feugiat,
arcu libero dapibus sapien, quis tincidunt nibh risus et arcu. Donec sagittis accumsan nibh vitae venenatis.
Suspendisse venenatis faucibus purus, eget aliquet sem dapibus et.
</p>
<h2>Paragraph 4</h2>
<p id="Epilog" onmouseover="boldStyle(this);" onmouseout="regularStyle(this);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque sed pellentesque nibh, nec accumsan risus.
Quisque non tempor orci. Sed interdum purus fermentum elementum facilisis. Proin blandit turpis eget dui
vehicula, nec elementum sapien dignissim.
</p>
<h2>Paragraph 5</h2>
<p id="Register" onmouseover="boldStyle(this);" onmouseout="regularStyle(this);">
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque quis iaculis
neque, et sodales nisi. Nullam quam metus, tincidunt in semper non, suscipit dictum erat. Nullam ullamcorper
elementum consectetur.
</p>
<button onclick="changeAllp();" value="">Ändra alla p-taggar</button>
<button onclick="createTable();" value="">lägg till en tabell</button>
<script>
/* a) när man klickar på 'Paragraph 1' ska det ändras till 'Avsnitt 1' (onclick)
) gör en metod som ändra alla h2's text från Paragraph x till Avsnitt x, dvs innerHTML ändras.
* Metoden utlöses med en knapp.
b) skapa en <ul>-lista som lista med alla färger som finns i 'someColor'. listan ska genereras med JS.
Skapandes kan utlösas med en knapp. Lista kan lägga till en befintlig paragraph eller ny
b) skriv en funktion som läsa slumpmässigt en färg från 'someColor' och gör den till bakgrundsfärg
* på den paragraph som klicktes.
*/
</script>
</body>
</html>