我使用'onmousemove=incfont()'将按钮连接到下面的javascript:
<html>
<div class="wrapper-fontsize">
<div class="fontChanger">
<span></span>
<span>
8
<input type="range" onmousemove="incfont();" id="fontsize" min="8" max="36" value="16" style="width: 80%;" />
36
</span>
<label style="display: block !important;">
Font Size :
<span id="size">16</span>
</label>
</div>
</div>
</html>
<script>
// ====== Font Resizer ======
var size;
var save = localStorage.getItem('fontChange', size);
if (localStorage.getItem('fontChange')) {
var x = document.getElementById('novel-content');
x.style.fontSize = save + "px";
document.getElementById('size').innerHTML = save;
document.getElementById('fontsize').value = save;
}
function incfont() {
var t = document.getElementById('fontsize').value;
var x = document.getElementById('novel-content');
x.style.fontSize = t + "px";
size = t;
document.getElementById('size').innerHTML = size;
localStorage.setItem('fontChange', size);
}
// ====== Open-Close The Tool ======
const closeFontChange = document.querySelector(".wrapper-fontsize");
function openFontChanger() {
closeFontChange.classList.add("active");
}
closeFontChange.addEventListener("click", function () {
closeFontChange.classList.remove("active");
});
</script>
:
- 我在桌面上试过了，文字可以在拖动时正确地改变字体大小。 然后我在手机上用chrome浏览器试了试。然后有一个bug，无论我对范围按钮做了什么，字体大小不想改变(遵循javascript)
- 一开始我认为这都是因为我的手机版本(6.0棉花糖)，所以我使用chrome"检查元素"通过设备视线(ctrl + shift + M)运行web。然后第二个问题发生了。 问题不在于本地存储。幸运的是，本地存储在桌面或移动设备上都运行良好。本地存储可以保存变量号，并以此启动功能。
到目前为止，我假设手机无法接受"onmausemove"。函数。如果这是真的，有什么东西可以用同样的函数来代替它吗?
一切都很简单，但也许我必须改变它的结构。因为我不能使用'onmausemove'，只是使用另一种方式，如onclick，但相同的功能。:
let ids = ["#content"];
// ====== Font Change ======
function changeFontSize(type) {
ids.forEach(id => {
let el = document.querySelector(id);
let fontSize = window.getComputedStyle(el, null).getPropertyValue("font-size");
fontSize = parseFloat(fontSize);
if(type === "increase" & fontSize < 24){
el.style.fontSize = (fontSize + 2) + "px";
}else if (type === "decrease" & fontSize > 12){
el.style.fontSize = (fontSize - 2) + "px";
}
var rest = window.getComputedStyle(el, null).getPropertyValue("font-size");
var size = rest.replace('px', '');
document.getElementById('size').innerHTML = size;
})
}body {
background: #d8d8d8;
}
.wrapper {
background: #fff;
padding: 4px 16px;
border-radius: 10px;
display: flex;
flex-direction: column;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
margin-bottom: 8px;
}
.wrapper p, .wrapper h1 {
color: #000;
text-align: justify;
line-height: 2;
font-family: 'Georgia', sans-serif;
margin: 0;
margin-bottom: 0.8em;
}
.wrapper p {
font-size: inherit;
}
.wrapper h1 {
font-size: 28px;
}
button {
background: transparent;
padding: 4px 20px;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
border: 1px solid #000;
transition: all .3s ease;
user-select: none;
cursor: pointer;
}
button:hover {
background: #1f1d34;
color: #fff;
}<div class="post-wrapper" style="filter: brightness(100%);">
<div class="wrapper" id="content">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis accusamus debitis possimus magni, ab explicabo laboriosam nesciunt quisquam expedita consequatur ut deserunt suscipit, voluptatibus, excepturi maiores quasi modi similique ad.
</p>
</div>
</div>
<div class="wrapper-fontsize">
<div class="fontChanger">
<h4>Font Size</h4>
<button onclick="changeFontSize('decrease')">A-</button>
<span id="size">16</span>
<button onclick="changeFontSize('increase')">A+</button>
</div>
</div>