CSSClass/demo.html at master · EarMaster/CSSClass · 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
<html>
	<head>
		<title>CSSClass Test</title>
		<script src="CSSClass.min.js"></script>
		<style>
			h1:after {
				color: silver;
				content: " Classes: "attr(class);
				font-size: 0.5em;
			}
			label {
				line-height: 2;
			}
			input {
				border: none;
				border-bottom: solid 1px silver;
				font-family: monospace;
			}
			.okay {
				color: green;
			}
			.error {
				color: red!important;
			}
			.test {
				color: orange;
			}
			.test.okay {
				color: red!important;
			}
		</style>
	</head>
	<body>
		<h1 id="test" class="error">CSSClass</h1>
		<p>If the text above is green, everything works fine, if it isn't, something went wrong. Please check your error console.</p>
		<p>Just enter some classnames in the boxes below and press enter. The small text behind the heading indicates which classes are present.</p>
		<label>addClass(<input type="text" id="addClass" />);</label><br />
		<label>removeClass(<input type="text" id="removeClass" />);</label><br />
		<label>toggleClass(<input type="text" id="toggleClass" />);</label><br />
		<label>hasClass(<input type="text" id="hasClass" />);</label><br />
		<script>
			if (document.querySelector('#test').hasClass('error'))
				document.querySelector('#test').removeClass('error').toggleClass('test').toggleClass('test okay');
			document.onkeyup = function (event) {
				if (event.keyCode==13) {
					switch (document.activeElement.id) {
						case 'addClass': document.querySelector('#test').addClass(document.activeElement.value); break;
						case 'removeClass': document.querySelector('#test').removeClass(document.activeElement.value); break;
						case 'toggleClass': document.querySelector('#test').toggleClass(document.activeElement.value); break;
						case 'hasClass': alert(document.querySelector('#test').hasClass(document.activeElement.value)); break;
					}
					document.activeElement.value = '';
				}
			}
		</script>
	</body>
</html>