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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

寻∝梦

Aug 27, 2018 pm 02:19 PM

classhtmlinput

この記事では主に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 id="Header-nbsp">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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLドキュメントのルートタグは何ですか？Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesStop-levellementThateChationCothercontent、ProperDocumentsTurcuteRuctureAndBrowsingを保証します。

HTMLタグと要素は同じものですか？Apr 28, 2025 pm 05:44 PM

この記事では、HTMLタグは要素を定義するために使用される構文マーカーであり、要素はタグやコンテンツを含む完全なユニットであると説明しています。彼らは協力してWebPages.Characterカウントを構築するために協力します：159

＆lt; head＆gt;の重要性は何ですかおよび＆lt; body＆gt; HTMLのタグ？Apr 28, 2025 pm 05:43 PM

この記事では、＆lt; head＆gt;の役割について説明します。および＆lt; body＆gt; HTMLのタグ、ユーザーエクスペリエンスへの影響、およびSEOの影響。適切な構造化により、ウェブサイトの機能と検索エンジンの最適化が強化されます。

＆lt; strong＆gt;＆lt; b＆gt;の違いは何ですかタグと＆lt; em＆gt;＆lt; i＆gt;タグ？Apr 28, 2025 pm 05:42 PM

この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。

HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。Apr 28, 2025 pm 05:41 PM

記事では、UTF-8に焦点を当てたHTMLでのキャラクターエンコーディングの指定について説明します。主な問題：テキストの正しい表示を確保し、文字化けされたキャラクターの防止、SEOとアクセシビリティの強化。

HTMLのさまざまなフォーマットタグは何ですか？Apr 28, 2025 pm 05:39 PM

この記事では、Webコンテンツの構築とスタイリングに使用されるさまざまなHTMLフォーマットタグについて説明し、テキストの外観に対する影響とアクセシビリティとSEOのセマンティックタグの重要性を強調しています。

「ID」属性とHTML要素の「クラス」属性の違いは何ですか？Apr 28, 2025 pm 05:39 PM

この記事では、HTMLの「ID」属性と「クラス」属性の違いについて説明し、一意性、目的、CSS構文、および特異性に焦点を当てています。それらがWebページのスタイリングと機能にどのように影響するかを説明し、のベストプラクティスを提供する

HTMLの「クラス」属性とは何ですか？Apr 28, 2025 pm 05:37 PM

この記事では、スタイリングとJavaScriptの操作の要素をグループ化するHTML「クラス」属性の役割を説明し、一意の「ID」属性とは対照的です。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。