-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
98 lines (89 loc) · 3.31 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<script>
window.Compatizr = {
load : 'all'
};
</script>
<script src="compatizr/compatizr.js"></script>
<script>
Compatizr.onload (function() {
var localField = document.getElementById ('localStorageValue');
localField.value = localStorage.getItem ('demo') || '';
localField.addEventListener ('change', function() {
localStorage.setItem ('demo', localField.value);
}, true);
var sessionField = document.getElementById ('sessionStorageValue');
sessionField.value = sessionStorage.getItem ('demo') || '';
sessionField.addEventListener ('change', function() {
sessionStorage.setItem ('demo', sessionField.value);
}, true);
var mmv = document.getElementById ('matchMediaValue');
document.getElementById ('matchMediaCalculate').addEventListener ('click', function() {
alert (window.matchMedia (mmv.value).matches);
}, true);
document.getElementById ('elementMethodsAddClass').addEventListener ('click', function() {
var nonSpecial = document.querySelector ('#elementMethodsDemo li:not(.special)');
if (nonSpecial) {
nonSpecial.classList.add ('special');
}
}, true);
document.getElementById ('elementMethodsToggleClasses').addEventListener ('click', function() {
var elements = document.querySelectorAll ('#elementMethodsDemo li');
var cnt = elements.length;
for (var i = 0; i < cnt; i++) {
elements[i].classList.toggle ('special');
}
}, true);
document.getElementById ('elementMethodsRemoveClass').addEventListener ('click', function() {
var special = document.querySelector ('#elementMethodsDemo li.special');
if (special) {
special.classList.remove ('special');
}
}, true);
});
</script>
<style>
.special {
background: red;
}
</style>
</head>
<body>
<div id="localStorageDemo">
<h2>Local Storage Demo</h2>
<input id="localStorageValue" />
<span>The value in that field will persist event if the browser is closed and then reopened.</span>
</div>
<div id="sessionStorageDemo">
<h2>Session Storage Demo</h2>
<input id="sessionStorageValue" />
<span>The value in that field will persist until the browser is closed.</span>
</div>
<div id="matchMediaDemo">
<h2>Match Media Demo</h2>
<input id="matchMediaValue" value="(min-width: 30px)" />
<input type="button" id="matchMediaCalculate" value="Evaluate" />
<span>Type in a media query and press the button to see the result</span>
</div>
<div id="elementMethodsDemo">
<h2>Element Methods Demo: classList, querySelector(All)</h2>
<input type="button" id="elementMethodsAddClass" value="Add class 'special' to the first element that does not have this class" />
<input type="button" id="elementMethodsToggleClasses" value="Toggle class 'special' for all the elements" />
<input type="button" id="elementMethodsRemoveClass" value="Remove class 'special' from the first element that has this class" />
<ul>
<li>Item 1</li>
<li class="special">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="special">Item 5</li>
<li>Item 6</li>
<li class="special">Item 7</li>
<li class="special">Item 8</li>
<li>Item 9</li>
<li class="special">Item 10</li>
</ul>
</div>
</body>
</html>