HTMLの<input>タグのclass属性の値と使い方のまとめ-htmlチュートリアル-php.cn

HTMLのタグのclass属性の値と使い方のまとめ

寻∝梦

リリース： 2018-08-27 14:19:46

オリジナル

27914 人が閲覧しました

この記事では主にHTMLにおけるinputタグのclass属性の具体的な役割を紹介し、最後にinputタグのclass属性と属性値の使い方についても説明します。ポイントは class 属性に関する別の使用例です。

まず最初に、HTML における input タグの class 属性の役割について話しましょう:

input タグの class 属性は、ページのクラススタイルを参照するために使用されます。

つまり、最初にタグでクラススタイルを定義し、それを参照します。

こんな感じ:

<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 要素に複数のクラスを割り当てることができます (例: )。これにより、複数の CSS クラスを 1 つの HTML 要素に組み合わせることができます。

クラス名を数字で始めることはできません!この方法をサポートしているのは Internet Explorer だけです。

HTML テーブルの th ヘッダーコンテンツを中央に配置するにはどうすればよいですか?テーブルヘッダータグの align 属性の詳細な紹介

以上がHTMLのタグのclass属性の値と使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。