web-dev-qa-db-fra.com

Méthode efficace pour augmenter/diminuer la taille de la police de tous les éléments de la page

Afin d'améliorer l'UX, je prévois d'avoir un outil d'augmentation/diminution/réinitialisation de la taille de la police sur toutes les pages de mon site Web (A-, A, A +).

Le problème auquel je suis confronté est que la taille de la police utilisée par différents éléments de la page est pas uniforme . Certains sont 14px, certains sont 18px, certains sont 12px et certains sont 15px.

En tant que tel, l'utilisation de la balise body pour manipuler la taille de la police n'obtiendra pas le résultat souhaité.

Existe-t-il une solution qui passe en revue chaque élément (obtient sa taille actuelle) et augmente sa taille de police de 1 si on a cliqué sur A+ ou diminue sa taille de 1 si on a cliqué sur A- et est revenue aux originaux si l'on a cliqué sur A?

PS: Je suis également ouvert aux solutions jQuery.

javascriptjquerycss
10
asprin

C'est pourquoi les unités em et rem ont été inventées au lieu de px. rem fait référence à la taille de la police racine, ce qui permet ensuite d’augmenter et de réduire la taille de la police du document entier très facilement à l’aide de body{ font-size : 120% };

Mais comme vous ne pouvez pas utiliser rem, voici une solution sale utilisant jQuery:

var $affectedElements = $("p"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p style="font-size : 30px">This text is initially 30px</p>
  <div>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>

13
Jeremy Thille

Votre meilleur pari le plus propre consiste à utiliser rem mélangé à jQuery.

La différence entre ma réponse et celle ci-dessus/ce que vous demandez, c’est qu'au lieu d’augmenter/décroître all des polices-tailles de 1, cela ne fera que modifier la taille de la police racine, ce qui cascade vers le bas et rendre toutes les autres polices scale en conséquence.

$('#_biggify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)+1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_smallify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)-1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_reset').on('click', function() {
  $('html').css('font-size', '32px')
})
html {
  font-size: 32px;
}

.smaller {
  font-size: 0.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Here is a regular piece of text in your document
</div>

<div class="smaller">
Here is text that should be smaller than the rest
</div>

<button id="_biggify">
Make Bigger
</button>

<button id="_smallify">
Make Smaller
</button>

<button id="_reset">
Make Default
</button>

Voici un JSFiddle: https://jsfiddle.net/Hybridx24/L3yzuvjr/

1
Hybrid