ホームページ > 記事 > ウェブフロントエンド > HTMLのタグのclass属性の値と使い方のまとめ
HTMLのタグのclass属性の値と使い方のまとめ
- 寻∝梦オリジナル
- 2018-08-27 14:19:4627868ブラウズ
この記事では主にHTMLにおけるinputタグのclass属性の具体的な役割を紹介し、最後にinputタグのclass属性と属性値の使い方についても説明します。ポイントは class 属性に関する別の使用例です。
まず最初に、HTML における input タグの class 属性の役割について話しましょう:
input タグの class 属性は、ページのクラス スタイルを参照するために使用されます。
つまり、最初に 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 タグでクラス スタイルを定義し、それを参照します。
こんな感じ:
<style type="text/css">
.btn{
color:red;
}
</style>
<input type="button" class="btn" />とにかく、このボタンの文字の色は赤です。興味があれば、自分で試してみることもできます。
以下は、特定の input タグの class 属性と属性値の使用方法の説明です:
classname 属性。 a タグの class 属性は、スタイルを追加するために使用されます。関連する概念には、クラス、クラス名とクラスリストのマッピングが含まれます。
一般に、すべての属性は object、object[""] および object.getAttribute("") によってアクセスできます。ただし、class は JavaScript の予約語であるため、上記のスキームによるアクセスのために classname にマップされます。 。したがって、標準ブラウザは、a.classname と a["classname"] という 2 つのアクセス方法をサポートしています。
a.getattribute("class") または a.getattribute("classname") については、ブラウザがこのアクセス方法と互換性があるかどうかによって異なります。 (テスト対象: 前者は mozilla (firefox) と opera では正しく実行できますが、IE と safari では使用できません。後者は IE と opera では正しく実行できますが、mozilla (firefox) と safari では使用できません。)
しかし、DOM2 レベルのメソッド object.getattribute("") は、タグ内のカスタム属性を取得するために使用する場合には問題ないため、保守的なアプローチは
classList 属性 です。 class 属性の値には class="top1 left" などの複数のスタイル名を含めることができるため、この文字列値はクラスのマッピングを完了する操作を必要とすることがよくありますが、クラスの値を操作する場合は非常に厳密であるように見えます。属性。 。どうすればよいでしょうか? HTML5 の新しい API クラスリストでこの問題は解決できます。
classlist 属性 は、classname のもう 1 つの改良点であり、これまで見てきた argument 属性や childnode 属性と同様に、配列のようなオブジェクトとして理解できます。 (まだテスト中)
classlist は、add( )、remove( )、toggle( )、contains( ) などの操作メソッドと属性、および長さをもたらします。
a.classList または a["classList"] を使用してアクセスできますが、a.getAttribute("classList") にはブラウザの互換性の問題がまだあります。
class 属性には、input タグでの使用に加えて、次のような他の方向性もあります:
HTML ドキュメントでの class 属性の使用例:
<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>コメントは次のとおりです。
class 属性は、base、head、html、meta、param、script、style、title の HTML 要素では使用できません。
HTML 要素に複数のクラスを割り当てることができます (例: 0be51a47f59f16298fd8778230b2d5c1)。これにより、複数の CSS クラスを 1 つの HTML 要素に組み合わせることができます。
クラス名を数字で始めることはできません!この方法をサポートしているのは Internet Explorer だけです。
【関連おすすめ】
HTMLにおけるheadタグとは何を意味するのでしょうか？この記事では、head タグを正しく使用する方法を説明しています
HTML テーブルの th ヘッダー コンテンツを中央に配置するにはどうすればよいですか?テーブルヘッダータグの align 属性の詳細な紹介
以上がHTMLのタグのclass属性の値と使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。