[英]Javascript : Font Size Increase/Decrease moves text
I have HTML pages, in which I am changing font size by using javascript syntax "document.body.style.fontSize = 100/50/20"
我有 HTML 页面,其中我正在使用 javascript 语法"document.body.style.fontSize = 100/50/20"
来更改字体大小
When I try to change the font size then the HTML moves text up/down according to font increase/decrease and the user is not able to persist at the same text at which the user was before changing the font size.当我尝试更改字体大小时,HTML 根据字体的增加/减少向上/向下移动文本,并且用户无法坚持用户在更改字体大小之前使用的相同文本。
How can I make the user to stay at the same place as before?我怎样才能让用户和以前一样呆在同一个地方?
If you want your user to toggle
the change in font size then javascript
is required here.如果您希望您的用户toggle
字体大小的更改,则此处需要javascript
。
document.body.style.fontSize
works only in one direction and ie to apply that size
but not reverting it back to it's original size. 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>
What I have understood from your question - you want the scroll to be on the same area where it was before changing font size.我从您的问题中了解到-您希望滚动条位于更改字体大小之前所在的同一区域。
I hope this will work.我希望这会奏效。
//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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.