Control the font size of any webpage with a slider.
目前為
// ==UserScript==
// @name Font Size Controller
// @description Control the font size of any webpage with a slider.
// @version 1.0
// @namespace https://yourwebsite.com
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// @include *
// ==/UserScript==
window.addEventListener('load', function() {
// Create slider element
var slider = document.createElement('input');
slider.type = 'range';
slider.min = '10';
slider.max = '32';
slider.value = GM_getValue("fontSize", '16'); // Get the stored font size, if any
slider.id = 'fontSlider';
slider.style = 'position: fixed; top: 0; left: 0; z-index: 9999'; // Position the slider at top left
// Create font size display element
var fontSizeDisplay = document.createElement('div');
fontSizeDisplay.id = 'fontSizeDisplay';
fontSizeDisplay.textContent = 'Font Size: ' + slider.value + 'px';
fontSizeDisplay.style = 'position: fixed; top: 3px; left: 140px; z-index: 9999; font-size: 10px'; // Position the display next to the slider
// Append slider and display to body
document.body.appendChild(slider);
document.body.appendChild(fontSizeDisplay);
// Function to update font sizes
function updateFontSizes(size) {
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
if (all[i].id !== 'fontSizeDisplay') {
all[i].style.fontSize = size + "px";
}
}
}
// Update the font sizes immediately upon loading the page
updateFontSizes(slider.value);
// Event listener for slider
slider.oninput = function() {
fontSizeDisplay.textContent = 'Font Size: ' + this.value + 'px'; // Update the display
updateFontSizes(this.value); // Update the font sizes
GM_setValue("fontSize", this.value); // Store the font size
}
});