jquery は画像に属性を追加できます。 2 つの追加方法: 1. attr() を使用して img 要素に属性を追加します。構文は "$("img").attr("Attribute Name", "Value")" です; 2. prop() を使用して追加します属性をピクチャ要素に設定する場合、構文は「$("img").prop("プロパティ名","値")」です。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery には属性を設定するためのメソッドが 2 つあります。
attr()
prop()
1. attr()
attr() メソッドを使用して、選択した要素の属性と値を設定または返します。
このメソッドを使用して属性値を設定すると、一致する要素に対して 1 つ以上の属性/値のペアが設定されます。
$("img").attr("属性名","属性值");例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("align","right");
});
});
</script>
</head>
<body>
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" style="max-width:90%" alt="jqueryで画像に属性を追加できますか?" ><br>
<br><br>
<button>给图片添加align属性，设置右对齐</button>
</body>
</html>
2. prop()
prop() メソッドと attr( )、選択した要素のプロパティと値も設定または返します。
このメソッドを使用して属性値を設定すると、一致する要素のセットに対して 1 つ以上の属性/値のペアが設定されます。
文法:
$("img").prop("属性名","属性值");例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").prop("alt","图像的替代文本");
});
});
</script>
</head>
<body>
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" style="max-width:90%" alt="jqueryで画像に属性を追加できますか?" ><br>
<br><br>
<button>给图片添加alt属性</button>
</body>
</html>
#拡張知識: 画像要素 img
| Value | Description | |
|---|---|---|
| top | bottommiddle left right | HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 周囲のテキストに対して画像をどのように配置するかを指定します。 |
| eager: すぐにロードします。 | lazy: 遅延ロード
ブラウザが画像をすぐにロードするか、遅延してロードするかを指定します。 |
|
| text | 画像の代替テキストを指定します。 | |
| ピクセル | HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 | 画像の周囲の境界線を指定します。 |
| 匿名 | use-credentials
画像のクロスドメイン属性を設定します |
|
| pixels | 画像の高さを指定します。 | |
| ピクセル | HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 | 画像の左右の余白を指定します。 |
| ismap | 画像をサーバー側のイメージ マップとして指定します。 | |
| URL | #HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 | 長い画像説明ドキュメントを含む URL を指します。#src |
| 画像を表示する URL を指定します。 | #usemap||
| イメージをクライアント側のイメージ マップとして定義します。 | vspace | |
| HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 画像の上下の余白を指定します。 | width | |
| 画像の幅を指定します。 | [推奨学習: | jQuery ビデオ チュートリアル
以上がjqueryで画像に属性を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
USESTATEの理解（）：React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AMusestate（）isareacthookusedtomeStateinfunctionalComponents.1）itInitializeSandUpDatestate、2）colledatttheToplevelofComponents、3）canleadto'stalestate'ifnotusedly、and4）cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates
Reactを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AMReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1）コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。
Reactでのデバッグ：一般的な問題の特定と解決Apr 25, 2025 am 12:09 AMdebugReactapplicationivivivity、EtheseStrategies：1）AddressPropdrillingWithContextapiorredux.2）HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3）最適化合物を使用して、最適化合物を使用してください
ReactのUseState（）とは何ですか？Apr 25, 2025 am 12:08 AMUseState（）inReactallowsstateManagementInFunctionalComponents.1）itsimplifiesstateManagement、makeCodemoreconcise.2）usetheprevcountFunctionToupDateStateBasedTateBasedTateBadeStateValue、AvolidingStalestateSues.3）
useState（）vs。usereducer（）：州のニーズに合った適切なフックを選択するApr 24, 2025 pm 05:13 PMChooseuseState()forsimple,independentstatevariables;useuseReducer()forcomplexstatelogicorwhenstatedependsonpreviousstate.1)useState()isidealforsimpleupdatesliketogglingabooleanorupdatingacounter.2)useReducer()isbetterformanagingmultiplesub-valuesorac
UseState（）を使用して状態を管理する：実用的なチュートリアルApr 24, 2025 pm 05:05 PMUseStateは、州の管理を簡素化し、コードをより明確にし、読みやすくし、Reactの宣言的な性質と一致するため、クラスコンポーネントやその他の州管理ソリューションよりも優れています。 1）UseStateを使用すると、状態変数を関数コンポーネントに直接宣言することができます。2）フックメカニズムの再レンダリング中に状態を覚えています。
UseState（）を使用する時期と、代替の州管理ソリューションを検討するタイミングApr 24, 2025 pm 04:49 PMuseUsestate（）forlocalcomponentStatemanagement; compleartinative forglogic、orperformanceissues.1）useidealforsimple、localstate.2）useglobalStateSolutionSolutionSuxorContextForSharedState.3）OptForreDuxtormobxobxobxobforexSt
Reactの再利用可能なコンポーネント：コードの維持可能性と効率の向上Apr 24, 2025 pm 04:45 PM再利用することは、codecodemaintainabilityを抑制することを再生します
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ホットトピック
7711
15164014139452128825123229