Javascript:字体大小增加/减少移动文本

Question

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

当我尝试更改字体大小时，HTML 会根据字体增加/减少向上/向下移动文本，并且用户无法保留用户在更改字体大小之前所在的相同文本。

如何让用户像以前一样呆在同一个地方？

Answer 1

如果您希望用户toggle字体大小的更改，则需要在此处javascript。

document.body.style.fontSize仅在一个方向上工作，并且 i-e 应用该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;