HTML タグのカスタム属性に関する質問

HTML タグのカスタム属性に関する質問

以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社のアウトソーシング会社に転職し、オープンソースフレームワークを使ったショッピングモールシステムを開発しました。コーディング中に、次のような状況に遭遇しました。 タグ内にカスタムタグが多数存在します。

コードをコピー
コードは次のとおりです。

<img msrc="<s:property value='#product.images'/>_m"
src="<s:property value='#product.images'/>_s" style="-ms-interpolation-mode:bicubic; cursor:pointer;"
onclick="queryProductDetail(this);"
infoType="<s:property value='#product.unitType'/>"
id="<s:property value='#product.unitID'/>"
moduleId="<s:property value='#product.unitID'/>"
chsDesc="<s:property value="#product.chsSimpleDesc"/>"
engDesc="<s:property value="#product.engSimpleDesc"/>"
chsName="<s:property value="#product.chsName"/>"
engName="<s:property value="#product.engName"/>"
onerror='checkImageFile(これ);'
onload="DrawImage(this,174,116)"/>

いくつかの点をまとめます。

1. HTML JS には影響はありません。複数の属性を記述できます。

2. 定義された属性の名前が元のデフォルト属性と同じでないことを確認します。

3. ブラウザはこのカスタム属性を解析しません

4. JS は xxx.getAttribute("あなたが書いた属性") を通じて値を取得できます。

この利点は明らかです。将来的にはこれをもっと頻繁に使用する必要があります。

<<:  Tomcat マルチレイヤーコンテナの設計に関する簡単な説明

>>:  MySql バッチに挿入するときにデータの重複を避ける方法

推薦する

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

MySQL Order By 複数フィールドのソートルールのコード例

事前に言っておく気まぐれですが、MySQL の order by sorting にどのようなルール...

Linux Bash スクリプトを使用してユーザーを識別する方法の例

多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...

Tomcatの自動シャットダウンに関するバグ修正

序文最近、4 年間実行されている Java EE Web プロジェクトでは、システムが開けないという...

nginxで複数のサーバーを簡単に構成する方法

1: nginx のインストール方法については詳しく説明しません。Baidu で検索してください。 ...

JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する

目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...

マークアップ言語 - CSS レイアウト

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

CSS でのシングル div 描画テクニックの実装

純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

ハイパーリンクに関するいくつかの質問

ポテトチップスパーティーのこのエピソードに参加して、何人かの友人に会えてとても嬉しいです。思いがけず...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...