-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
69 lines (58 loc) · 2.74 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<title id="title">
future billionaire -Love
</title>
</head>
<body style="background-color:white;">
<div style="text-align: center;">
<button onclick="spreadfunction()">spread</button>
<button onclick="rollback()">rollback</button>
<button onclick="changesize('minus')">-</button>
<button onclick="changesize('plus')">+</button>
<br>
<button onclick="decoration('underline')">underline</button>
<button onclick="decoration('overline')">overline</button>
<button onclick="decoration('linethrough')">linethrough</button>
<button onclick="decoration('both')">both</button>
<button onclick="decoration('clear')">clear</button>
<br>
<input id="titleinput"/>
<h2 id="changetext" style="color: blueviolet;">LOVE</h2>
</div>
</body>
<script>
function spreadfunction() {
document.getElementById("changetext").innerText=document.getElementById("changetext").innerText.split("").join(" ");
}
document.getElementById("titleinput").addEventListener("change",changeTitle);
function changeTitle(){
document.getElementById("changetext").innerText=document.getElementById("titleinput").value;
}
function rollback(){
document.getElementById("changetext").innerText=document.getElementById("changetext").innerText.split(" ").join("");
}
function changesize(operator){
var fontSize = parseFloat(window.getComputedStyle(document.getElementById("changetext"), null).getPropertyValue('font-size'));
if(operator=='minus'){
document.getElementById("changetext").style.fontSize = (fontSize - 1) + 'px';
}else if(operator=='plus'){
document.getElementById("changetext").style.fontSize = (fontSize + 1) + 'px';
}
}
function decoration(rico){
if(rico=='underline'){
document.getElementById("changetext").style.textDecoration="underline";
}else if(rico=='overline'){
document.getElementById("changetext").style.textDecoration="overline";
}else if(rico=='linethrough'){
document.getElementById("changetext").style.textDecoration="line-through";
}else if(rico=='both'){
document.getElementById("changetext").style.textDecoration="overline underline";
}else if(rico=='clear'){
document.getElementById("changetext").style.textDecoration="";
}
}
</script>
</html>