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

Question

如何执行功能，例如我输入的值从 1 到 10，如果值设置为 1，则所有字体大小都是原始的，如果 10，则每个元素的字体大小更改为 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);
    });
});​

请参阅jsFiddle 上的测试用例

Answer 3

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

$(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：]

除了选择 p，您还可以选择 body 甚至 html 标签并在其上更改字体大小。这将级联（继承）到所有孩子。只要确保没有其他子元素覆盖字体大小。这样您就不必遍历许多元素。