根據原始大小更改字體大小

如何操作功能，例如我輸入的值在1到10之間，如果值設置爲1，那麼所有字體大小都是原始的，如果是10，那麼font-每個元素的大小更改爲10 *原始大小？根據原始大小更改字體大小

請注意，網站上可能有數千個元素（單詞）。

性能是至關重要的

2012-10-04 gruber

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

您需要在整個頁面中使用相對字體大小這個工作。

在使用它之前，你還應該在值中添加一些錯誤檢查。

來源

2012-10-04 15:54:10 Quentin

他並不需要使用相對的字體大小，但它肯定會是性能最高的解決方案，因爲它或多或少是原生的。 – mekwall

如果任何後代使用絕對字體大小，那麼它和它的所有後代將不會相對於主體進行縮放。所以他確實需要使用相對字體大小來實現此解決方案。 – Quentin

對於這個解決方案是的，但沒有必要解決他的問題。如果他需要使用固定的字體大小，那麼我的解決方案將工作。這取決於gruber :) – mekwall

我爲你建了一個小腳本，應該做你所要求的。性能不應該成爲一個問題，除非你有數百個需要改變其字體大小的不同元素。儘管這些元素中有多少單詞並不重要。

這裏的腳本：

// 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

來源

2012-10-04 15:59:07 mekwall

您必須創建一個重新定義取決於輸入的值的大小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; 
    }); 
});

來源

2012-10-04 15:59:10 Kedume

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

基本上，首先選擇所有必需的元素，這樣您只能遍歷DOM一次，然後在輸入文本框中輸入一個關鍵事件。在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標籤並改變字體大小。這將把所有孩子都遺傳下去（繼承）。只要確保沒有其他子元素覆蓋字體大小。這樣你就不必遍歷許多元素。

來源

2012-10-04 16:22:47

DOM性能問題涉及到大量節點，而不是大量文本。你只修改一個節點！（這也不是很多文字！）。您還必須更改每次更改元素時更改的字體大小，因此「僅一次」僅適用於發現節點。 – Quentin

'origSize = origSize.substr（0，origSize.length - 2）;' - 假設字體大小不會被定義爲'％'是否安全？這應該用'parseFloat'處理。 – Quentin

現場演示很棒，但它們應該補充一個答案，而不是它的一個重要部分（即你的代碼應該在答案中）。 – Quentin

根據原始大小更改字體大小

回答

相關問題