Question

我怎么能做一些功能，比如我输入的输入我输入的值是1到10，如果值设置为1，则所有font-size都是原始的，如果是10则每个元素的font-size更改为10 *原始尺寸？

请注意，网站上有数千个元素（单词）。

表现至关重要

Answer 1

document.body.style.fontSize = document.getElementById('myInput').value + 'em';

您需要在整个页面中使用相对字体大小才能实现此目的。

在CSS中使用之前，您还应该对值添加一些错误检查。

Answer 2

我为你制作了一个小脚本，应该按照你的要求做。除非有数百个不同的元素需要更改其字体大小，否则性能不应该成为问题。但是这些元素中有多少单词并不重要。

这是脚本：

// Store elements that should change font size
var $changeElements = $(".change-font-size");
// Hook into the keyup event of your input
$("input").keyup(function(){
    // Let's get the multiplier
    var multiplier = parseFloat($(this).val(), 10);
    // Loop through elements
    $changeElements.each(function(){
        var $this = $(this);
        // Get saved font size from dataset
        var fontSize = $this.data("font-size");
        if (!fontSize) {
            // Get original font size from css and save it to dataset
            // parseInt automagically removes "px"
            fontSize = parseInt($this.css("fontSize"), 10);
            $this.data("font-size", fontSize);
        }
        // Calculate and set the new font size
        $this.css("fontSize", fontSize * multiplier);
    });
});

请参阅test case on jsFiddle

Answer 3

你必须根据输入的值创建一个重新定义大小的rutine，它应该是这样的：

$(document).ready(function(){
  // Increase Font Size
  $("#increaseFont").change(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*$("#increaseFont").val();
    $('html').css('font-size', newFontSize);
    return false;
  });
});

Answer 4

这是我的小提琴：http://jsfiddle.net/digitalpunch/A6V6e/4/

基本上，首先选择所有必需元素，这样您只需遍历DOM一次，然后在输入文本框中输入一个keyup事件。在Chrome中测试过。工作得非常快 - 我在小提琴中使用了大量文字。

祝你好运，达莫

[编辑：] 由于公众需求，这里是来自小提琴的代码：

Size: <input type="text" id="size_var"></input>
<p>Lorem ipsum dolor sit amet, consectetur adipi</p>

$(function() {
    var $p = $('p');
    var origSize = $p.css('font-size');
    origSize = origSize.substr(0, origSize.length - 2);                  
    $('#size_var').keyup(function() {
        var multiplier = $(this).val();
        var size = origSize;
        size *= multiplier;
        $p.css({
            'font-size': size + 'px'
        });
    });
});

[编辑2：]

您可以选择正文或甚至html标记，并在其上更改字体大小，而不是选择p。这将级联（继承）给所有孩子。只需确保没有其他子元素覆盖font-size。这样您就不必遍历许多元素。

根据原始大小更改字体大小

4 个答案: