單擊按鈕時將字體大小增加或減少1em

Question

我正在嘗試在jQuery中制作一個字體大小更改器。

這個想法是，當您單擊帶有標簽“ a +”的按鈕時，指定元素的字體大小將增加1em（因此，如果當前字體大小是2em，它將變為3em），並且標簽將變為“ a-”。 ”。 當您單擊帶有標簽“ a-”的相同按鈕時，指定元素的字體大小減小1em（因此，如果當前字體大小為3em，則它變為2em），並且標簽變回“ a +”。

但是，我只能將字體大小增加/減少到指定的值，並且想要一些幫助使字體大小增加/減少1em。

這是我當前的jQuery代碼：

 $("#ChangeFontSizeButton").click(function() { if ($(this).text()=='a+') { $("p").css("font-size", "1.875em"); $(this).text('a-'); } else { $("p").css("font-size","0.875em"); $(this).text('a+'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <button type="button" id="ChangeFontSizeButton">a+</button> <p>Hello, this is a sentence.</p> </body> </html>

因此，您能否以某種方式將指定元素的字體大小增加（當按鈕的標簽為“ a +”時）或減少（當按鈕的標簽為“ a-”時）編碼此功能？

Answer 1

使用$("p").css("font-size")我們可以獲得以像素為單位的當前字體大小。 只需將該數字除以16（將其轉換為整數后），就可以得到em中的當前大小。

從那里，只需添加一個，然后設置字體大小。

 $("#ChangeFontSizeButton").click(function() { var em = parseInt($("p").css("font-size")) / 16; if ($(this).text()=='a+') { $("p").css("font-size", em+1 + "em"); $(this).text('a-'); } else { $("p").css("font-size", em-1 + "em"); $(this).text('a+'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <button type="button" id="ChangeFontSizeButton">a+</button> <p>Hello, this is a sentence.</p> </body> </html>

Answer 2

最簡單的方法是在em中定義所有文本樣式，並使用jQuery更改body的基本字體大小。 所有基於em和rem的樣式都將繼承自該樣式

單擊按鈕時將字體大小增加或減少1em

問題描述

2 個解決方案

解決方案1
2 2017-12-10 05:45:46

解決方案2
0 2017-12-10 05:43:24

單擊按鈕時將字體大小增加或減少1em

問題描述

2 個解決方案

解決方案1 2 2017-12-10 05:45:46

解決方案2 0 2017-12-10 05:43:24

解決方案1
2 2017-12-10 05:45:46

解決方案2
0 2017-12-10 05:43:24