5 API simples et pratiques en HTML5_html5 tutoriel compétences-Tutoriel H5-php.cn

5 API simples et pratiques en HTML5_html5 tutoriel compétences

WBOY

Libérer： 2016-05-16 15:47:59

original

1729 Les gens l'ont consulté

On ne peut pas dire que cela soit vaniteux de notre part. Pendant de nombreuses années, l'API HTML de base ne s'est pas du tout développée, de sorte que lorsqu'une petite nouvelle fonctionnalité apparaît, comme un espace réservé, elle nous fera paraître nouveaux. Bien que de nombreuses fonctionnalités HTML5 soient implémentées dans les navigateurs modernes, la plupart des programmeurs ne connaissent toujours pas ou n'ont jamais entendu parler de certaines petites API très utiles. Dans cet article, je présenterai certaines de ces API et inviterai tout le monde à découvrir d'autres API HTML5 inconnues !

Element.classList

L'API classList fournit la fonctionnalité de base de contrôle CSS que nous avons implémentée à l'aide de bibliothèques d'outils JavaScript depuis de nombreuses années :

Copier le code

Le code est le suivant :

// Ajouter une classe CSS
myElement.classList.add("newClass");
//Supprimer une classe CSS
myElement. classList.remove("existingClass");
// Vérifier s'il existe une classe CSS
myElement.classList.contains("oneClass");
// Inverser la présence d'une classe CSS
myElement.classList.toggle("anotherClass");

La principale valeur de cette nouvelle API est : simple et pratique.

API ContextMenu

Cette nouvelle API ContextMenu est très utile : elle ne remplace pas le menu contextuel d'origine, mais ajoute votre menu contextuel personnalisé au menu contextuel du navigateur :

Copier le code

Le code est le suivant :

Il convient de noter qu'il est préférable d'utiliser JavaScript pour créer dynamiquement ces codes de menu, car les événements de menu appelleront finalement JavaScript pour effectuer des tâches. Si l'utilisateur désactive JavaScript, le menu contextuel ne sera pas généré et il. ne verra pas le menu en même temps.

Element.dataset

Grâce à l'API de l'ensemble de données, les programmeurs peuvent facilement obtenir ou définir des attributs data-*custom :

Copier le code

Le code est le suivant :

/* Prenez le code suivant à titre d'exemple

*/
// Obtenir l'élément
var element = document.getElementById("myDiv");
// Obtenir l'identifiant
var id = element.dataset.id;
// Lire la valeur "data -my-custom-key"
var customKey = element.dataset.myCustomKey;
// Modifier vers une autre valeur
element.dataset.myCustomKey = "Une autre valeur";
// Le résultat est :
//

< /div>

Pas besoin d'en dire plus, tout comme classList, simple et pratique

API window.postMessage

Même IE8 prend en charge l'API postMessage depuis de nombreuses années. La fonction de l'API postMessage est de vous permettre de transférer des données d'information entre deux fenêtres de navigateur ou iframes :

<🎜. >Copier le codeLe code est le suivant :

// Depuis la fenêtre ou l'iframe du domaine A, envoyez un message à la fenêtre ou l'iframe du domaine B
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Salutages dès la première fenêtre!");

//Recevoir des messages dans une fenêtre ou une iframe sur un deuxième domaine différent
window.addEventListener("message", function(event) {
// Vérifier la validité du domaine
if( event.origin == "http://www.jb51.net") {
// Informations du journal de sortie
console.log(event.data);
// Message de retour
événement. source.postMessage("Comment vas-tu aussi !");
}
]);

Le corps du message ne peut être qu'une chaîne, mais vous pouvez utiliser JSON.stringify et JSON.parse pour convertir le message en un corps de données plus significatif !

attribut de mise au point automatique

L'attribut

autofocus permet à l'élément BUTTON, INPUT ou TEXTAREA de devenir automatiquement le focus de la page lorsque la page est chargée :

Copier le code

Le code est le suivant :

Dans les endroits avec des modèles fixes comme les pages de recherche Google, l'attribut de mise au point automatique est la fonctionnalité la plus idéale.

La prise en charge du navigateur pour chaque API est légèrement différente, alors vérifiez la prise en charge de ces fonctionnalités avant de l'utiliser. Prenez le temps de lire la description détaillée de chaque API, je pense que vous en trouverez plus.