Résumé de la valeur de l'attribut class de la balise <input> en HTML et comment l'utiliser-tutoriel HTML-php.cn

Résumé de la valeur de l'attribut class de la balise en HTML et comment l'utiliser

寻∝梦

Libérer： 2018-08-27 14:19:46

original

27912 Les gens l'ont consulté

Cet article vous présente principalement le rôle spécifique de l'attribut class de la balise input en HTML. Il existe des exemples pour le prouver. Il y a également une explication sur la façon d'utiliser l'attribut class et la valeur d'attribut de la balise input. Le dernier point concerne l'attribut class. Un exemple d'autre utilisation.

Tout d'abord, parlons du rôle de l'attribut class de la balise input en HTML :

L'attribut class de la balise input est utilisé pour référencer le style de classe de votre page.

C'est-à-dire que vous définissez d'abord un style de classe dans la balise , puis vous y faites référence.

Comme ceci :

<style type="text/css">
.btn{
color:red;
}
</style>
<input type="button" class="btn" />

Copier après la connexion

L'effet de la page ne sera pas affiché. Quoi qu'il en soit, la couleur du texte sur ce bouton est rouge. Si vous êtes intéressé, vous pouvez l'essayer vous-même.

Ce qui suit est une explication de la façon d'utiliser l'attribut de classe et la valeur d'attribut de la balise d'entrée spécifique :

attribut classname. L'attribut class dans la balise a est utilisé pour ajouter des styles. Les concepts associés incluent la classe et le mappage du nom de classe et de la liste de classes.

De manière générale, tous les attributs sont accessibles par object, object[""] et object.getAttribute(""), mais comme class est un mot réservé JavaScript, il est mappé à classname pour accéder aux scénarios ci-dessus. Par conséquent, les navigateurs standards prennent en charge l'accès de deux manières : a.classname et a["classname"].

Quant à a.getattribute("class") ou a.getattribute("classname"), cela dépend si le navigateur est compatible avec cette méthode d'accès. (À tester : le premier peut fonctionner correctement dans Mozilla (Firefox) et Opera, mais ne peut pas être utilisé dans IE et Safari. Le second peut fonctionner correctement dans IE et Opera, mais ne peut pas être utilisé dans Mozilla (Firefox) et Safari.)

Mais la méthode DOM niveau 2 object.getattribute("") convient parfaitement pour obtenir des attributs personnalisés dans les balises, donc une approche conservatrice est l'

attribut classList. Étant donné que la valeur de l'attribut class peut contenir plusieurs noms de style, tels que class="top1 left", cette valeur de chaîne nous oblige souvent à opérer Classname complète le mappage de la classe, mais elle semble très rigide lors de l'utilisation de la valeur de la classe. attribut. . Que faire ? La nouvelle liste de classes API en HTML5 peut résoudre ce problème. L'attribut

classlist est une autre amélioration du nom de classe. Tout comme l'attribut arguments et l'attribut childnode que nous avons vus, il peut être compris comme un objet de type tableau. (Encore à tester)

classlist apporte quelques méthodes de fonctionnement et attributs : add( ), remove( ), toggle( ), contain( ), etc.

est accessible en utilisant a.classList ou a["classList"]. Il existe toujours des problèmes de compatibilité du navigateur avec a.getAttribute("classList").

En plus d'être utilisé dans les balises d'entrée, l'attribut class a également d'autres directions, telles que les suivantes :

Utiliser l'attribut class dans les documents HTML Exemple :

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>

Copier après la connexion

Voici le commentaire :

L'attribut class ne peut pas être utilisé dans le HTML suivant éléments : base, head, html, méta, param, script, style et titre.

Vous pouvez attribuer plusieurs classes aux éléments HTML, par exemple : . Cela vous permet de combiner plusieurs classes CSS en un seul élément HTML.

Les noms de classes ne peuvent pas commencer par des chiffres ! Seul Internet Explorer prend en charge cette pratique.

[Recommandations associées]

Que signifie la balise head en HTML ? Un article vous apprend à utiliser correctement la balise head

Comment centrer le contenu de l'en-tête dans un tableau html ? Une introduction détaillée à l'attribut align de la balise d'en-tête

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!