Maison > interface Web > js tutoriel > Comment styliser la moitié d'un personnage avec CSS et JavaScript : une quête d'accessibilité ?

Comment styliser la moitié d'un personnage avec CSS et JavaScript : une quête d'accessibilité ?

Linda Hamilton
Libérer: 2024-10-31 04:10:30
original
917 Les gens l'ont consulté

 How to Style Half a Character with CSS and JavaScript: A Quest for Accessibility?

Stylisme partiel des personnages : une quête de transparence

Le défi de styliser seulement la moitié d'un personnage, tout en gardant le texte accessible, intrigue les développeurs depuis un certain temps. Cet article présentera la solution en utilisant une combinaison de CSS pur et de JavaScript pour une implémentation dynamique.

Solution pour les caractères uniques

Pour styliser un seul caractère, ajoutez simplement la classe ".halfStyle" à l'élément span correspondant. L'astuce consiste à définir dynamiquement le contenu ":before" du pseudo-élément à l'aide de l'attribut "data-content". Cela vous permet de spécifier le caractère souhaité pour chaque étendue.

Solution automatisée pour le texte dynamique

Pour appliquer un style partiel au texte dynamique, jQuery automatise le processus. En parcourant les caractères, il crée des éléments cachés pour l'accessibilité et des éléments visibles avec la classe ".halfStyle".

Implémentation CSS

<code class="css">.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content);
    overflow: hidden;
    color: #f00;
}</code>
Copier après la connexion

< h3>Implémentation JavaScript

<code class="javascript">$('.textToHalfStyle').each(function() {
    var $el = $(this);
    var text = $el.text();
    var chars = text.split('');

    for (var i = 0; i < chars.length; i++) {
        $el.append('<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>');
    }
});</code>
Copier après la connexion

Préservation de l'accessibilité

Cette solution garantit l'accessibilité en fournissant du texte masqué pour les lecteurs d'écran. L'élément invisible préserve le texte original tout en permettant à l'élément visible d'afficher la partie stylisée.

Conclusion

Avec cette technique, vous pouvez obtenir l'effet souhaité de styliser partiellement les caractères dans le texte, qu'ils soient statiques ou dynamiques. Il utilise une combinaison de CSS et de JavaScript pour maintenir l'accessibilité tout en améliorant l'attrait visuel de vos conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal