1. 程式人生 > >ng4+ts設定 localStorage 實現可調節字型大小

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>`);
        }
    }