ng4+ts設定 localStorage 實現可調節字型大小
less:
.navbar-font {
display: flex; // position: relative;
// left: 330px;
margin: auto;
cursor: pointer;
.reduce-font,
.add-font {
border: 1px solid #cccccc;
width: 30px;
height: 25px;
text-align: center;
line-height: 21px;
}
.middle {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
width: 40px;
height: 25px;
text-align: center;
line-height: 21px;
}
}
html:
<div class="navbar-font">
<div class="reduce-font" (click)="reduceFont()">
-
</div>
<div class="middle" (click)="reset()">
字型
</div>
<div class="add-font" (click)="addFont()">
+
</div>
</div>
ts:
private localStorage: Storage = window.localStorage;
ngOnInit(){
this.setFontSize(this.localStorage.getItem("fontSize"));
}
addFont(): void {
let fontSize = this.localStorage.getItem("fontSize");
if (!fontSize) {
fontSize = "12";
} else if (parseInt(fontSize, 0) < 20) {
fontSize = (parseInt(fontSize) + 1).toString();
}
this.setFontSize(fontSize);
}
reduceFont(): void {
let fontSize = this.localStorage.getItem("fontSize");
if (!fontSize) {
fontSize = "12";
} else if (parseInt(fontSize, 0) > 12) {
fontSize = (parseInt(fontSize) - 1).toString();
}
this.setFontSize(fontSize);
}
reset(): void {
this.setFontSize(12);
}
setFontSize(fontSize: any) {
if (fontSize) {
this.localStorage.setItem("fontSize", fontSize);
$("#de-font-style").remove();
$("body").append(`<style id='de-font-style'>body *{ font-size: ${fontSize}px }</style>`);
}
}