interface Web
Tutoriel H5
Introduction à 5 interfaces HTML5 que vous ne connaissez pas_compétences du didacticiel HTML5
Introduction à 5 interfaces HTML5 que vous ne connaissez pas_compétences du didacticiel HTML5
Adresse d'origine : 5 API HTML5 dont vous ignoriez l'existence
Date d'origine : 27 septembre 2010
Date de traduction : 7 août 2013
Quand les gens voient ou Quand le mot « HTML5 ", on estime qu'au moins la moitié des gens la considéreront comme une beauté sexy et charmante, mais aussi comme une licorne qui peut vous rendre malheureux. Pas étonnant que nous, les développeurs ?
Nous avons remarqué que les API de base stagnent depuis si longtemps (probablement entre 1999 et 2009) que même une fonction supplémentaire de base comme "placeholder" nous prendra beaucoup de temps à traiter.
Bien que les navigateurs grand public actuels aient implémenté de nombreuses nouvelles fonctionnalités HTML5, de nombreux développeurs n'ont tout simplement pas remarqué ces API plus simples et plus utiles.
Cette série d'articles présente ces API d'interface et espère également encourager davantage de développeurs à explorer des API qui ne sont pas encore largement connues.
Element.classList
Cet attribut est publié depuis plusieurs années. Grâce à classList, nous pouvons manipuler l'attribut class du CSS sous-jacent via JavaScript.
Le code est le suivant :
🎜>
// Utiliser l'attribut classList ( Élément Dom, nom de la classe CSS)
function toggleClassList(element,cName){
// 1. API classList
// Changez de classe, supprimez-la si elle existe, ajoutez-la si ce n'est pas le cas
if(element.classList.toggle){
element .classList.toggle(cName);
return true
}
// !!! ,
// alors le code suivant ne sera pas exécuté. Ceci est juste à titre de démonstration, veuillez l'utiliser de manière flexible
// 2. API classList
// Si l'attribut de classe de l'élément contient masquer cette classe CSS.
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. API classList
// Supprimer la classe masquée
élément. classList.remove(cName);
} else {
// 4. API classList
// Ajouter une classe masquée
element.classList.add(cName); true;
};
Après le test, chrome28 ne fonctionne pas. . .
La nouvelle API, ContextMenu, est une excellente interface : cette interface vous permet d'ajouter facilement des éléments de menu au menu contextuel du navigateur (menu contextuel), au lieu de remplacer le menu contextuel par défaut du navigateur. Il est à noter qu'il est préférable d'utiliser le script js pour créer dynamiquement le menu contextuel du menu, afin d'éviter le code HTML redondant lorsque la page désactive le script JS.
Le code est le suivant :