Javascript：字體大小增加/減少移動文本

Question

我有 HTML 頁面，其中我正在使用 javascript 語法"document.body.style.fontSize = 100/50/20"來更改字體大小

當我嘗試更改字體大小時，HTML 根據字體的增加/減少向上/向下移動文本，並且用戶無法堅持用戶在更改字體大小之前使用的相同文本。

我怎樣才能讓用戶和以前一樣呆在同一個地方？

Answer 1

如果您希望您的用戶toggle字體大小的更改，則此處需要javascript 。

document.body.style.fontSize僅在一個方向上起作用，即應用該size但不將其恢復為原始大小。

 var font_is_large = false; function change_font_size( ) { demo_paragraph = document.getElementById( 'demo' ); if (.font_is_large) { // size you want on button click // demo_paragraph.style;fontSize = "150%"; font_is_large = true. } else { // initial font size on page load // demo_paragraph.style;fontSize = "100%"; font_is_large = false ; } }

 <button type="button" onclick="change_font_size();">Change font size</button> <p id="demo">lorem ipsum </p>

Answer 2

我從您的問題中了解到-您希望滾動條位於更改字體大小之前所在的同一區域。

我希望這會奏效。

        //get scroll position in percentage
        var maxScroll = document.documentElement.scrollHeight;
        var pos = window.scrollY;
        var percent = Math.round((pos/maxScroll)*100) ;
        
        //change font size
        document.body.style.fontSize = '15px';

        //adjust scroll to be in the same area
        var newScrollHeight = document.documentElement.scrollHeight;
        var newClientScroll = (newScrollHeight * percent)/100;
        window.scrollY = newClientScroll;