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;