changez la taille de police basée sur la taille originale

Question

Comment est-ce que je peux faire la fonctionnalité par exemple j'ai l'entrée dans laquelle je tape dans la valeur de 1 à 10 et si la valeur est fixée à 1 toute taille de police est originale et la taille de chaque élément change à 10 * taille d'origine?

veuillez noter qu'il peut y avoir des milliers d'éléments (mots) sur le site.

performances

est cruciale

Answer 1

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

Vous devrez utiliser des tailles de police relatives dans toute la page pour que cela fonctionne.

Vous devriez également ajouter une vérification d'erreur sur la valeur avant de l'utiliser dans votre CSS.

Answer 2

J'ai construit un petit script pour vous qui devrait faire ce que vous demandez. Les performances ne devraient pas vraiment poser de problème à moins d'avoir des centaines d'éléments différents dont la taille de police doit être modifiée. Combien de mots qui sont à l'intérieur de ces éléments n'a pas vraiment d'importance cependant.

est ici le script:

// 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); 
    }); 
});​ 

Voir test case on jsFiddle

Answer 3

Vous devez créer un rutine qui redéfinissent la taille en fonction de la valeur de l'entrée, il devrait ressembler à ceci:

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

Voici mon violon: http://jsfiddle.net/digitalpunch/A6V6e/4/

Fondamentalement, sélectionnez d'abord tous les éléments requis, de sorte que vous ne parcourez qu'une seule fois le DOM et que vous ayez un événement de manipulation dans votre zone de saisie. Testé dans Chrome. Fonctionne assez vite - j'ai utilisé beaucoup de texte dans le violon.

Bonne chance, Damo

[EDIT:] En raison de la demande du public est ici le code du violon:

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' 
     }); 
    }); 
});​ 

[EDIT 2:]

Au lieu de sélectionner la p, vous pouvez sélectionner des balises body ou même html et changer la taille des polices. Cela descendra en cascade (héritage) pour tous les enfants. Assurez-vous simplement qu'aucun autre élément enfant ne remplace la taille de la police. De cette façon, vous n'avez pas besoin de parcourir plusieurs éléments.