Exemple complet d'implémentation js des compétences function_javascript sur la taille du texte de l'article

L'exemple de cet article décrit la méthode d'utilisation de js pour réaliser la fonction de taille de police du texte de l'article. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le texte grand, moyen et petit est une fonction que de nombreux sites Web proposent pour faciliter la lecture des utilisateurs. La fonction de taille de police de texte grande, moyenne et petite présentée dans cet article peut être activée une fois que l'utilisateur l'a sélectionnée. un autre article est ouvert sur le même site, la taille de la police sera affichée selon les habitudes de l'utilisateur.

Vous devez avoir vu les trois boutons « Grand », « Moyen » et « Petit » sous le titre de l'article sur certains grands sites Web, qui sont utilisés pour répondre aux habitudes de lecture de différentes personnes. Ici, je vais présenter cette méthode, et elle prend en charge la sauvegarde automatique par rapport à la leur. Vous n'avez besoin de la sélectionner qu'une seule fois, et elle s'ajustera automatiquement à votre taille de police préférée la prochaine fois que vous la lirez.

Partie du code JS :

Mettez d'abord le JS suivant dans un fichier JS ou une balise de script :

Copier le code Le code est le suivant :

jQuery.cookie = function(nom, valeur, options) {
Si (type de valeur ! = 'indéfini') {
options = options || {};
Si (valeur === null) {
              valeur = '';
options.expires = -1;
>
      var expire = '';
If (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
         date variable ;
Si (type d'options.expires == 'numéro') {
date = nouvelle Date();
date.setTime(date.getTime() (options.expires * 24 * 60 * 60 * 1000));
               } autre {
Date = options.expires;
            }
expire = '; expire=' date.toUTCString();
>
       var path = options.path '; path=' options.path : '';
       var domaine = options.domaine '; domaine=' options.domaine : '';
        var secure = options.secure '; secure' : '';
           document.cookie = [nom, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} autre {
        var cookieValue = null;
Si (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
pour (var i = 0; i < cookies.length; i ) {
              var cookie = jQuery.trim(cookies[i]);
If (cookie.substring(0, name.length 1) == (name '=')) {
                       cookieValue = decodeURIComponent(cookie.substring(name.length 1));
pause;
                }
            }
>
          return cookieValue ;
>
};
fonction SetFont(taille){
$.cookie('Font_size', size, { expire : 99999999 });
$(".context").css("font-size",size);//.context est remplacé par le conteneur du contenu de votre article
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') 'px' );
});

Remplacez le .context du code par le conteneur de contenu de votre article.

Partie code HTML :

Appelez ensuite le code suivant si nécessaire :

Copier le code Le code est le suivant :

Gros
中
small

Vous pouvez personnaliser la taille de la police et le texte dans la fonction SetFont().

J'espère que cet article sera utile à la programmation Web de chacun basée sur JavaScript.