ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで画像コンテンツを設定する方法
JavaScriptで画像コンテンツを設定する方法
- 青灯夜游オリジナル
- 2021-07-26 18:28:535974ブラウズ
img タグのコンテンツは主に src 属性によって制御されます。JavaScript では、setAttribute() メソッドを使用して img タグの src 属性の値を設定し、その後 img コンテンツを設定できます。構文は「img element object.setAttribute("src" ,"プロパティ値")」です。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
タグは、HTML ページ内の画像を定義します。
タグには、src と alt という 2 つの必須属性があります。
src タグの src 属性は必須です。画像のURLを指定します。
Web ページが読み込まれると、ブラウザは Web サーバーから画像を取得し、ページに挿入します。したがって、画像が関連する Web ページと同じ位置にあることを確認してください。そうしないと、訪問者に壊れたリンク アイコンが表示される可能性があります。ブラウザが画像を見つけられない場合は、リンク切れのアイコンが表示されます。
JavaScript で画像コンテンツを設定する
JavaScript では、setAttribute() メソッドを使用して画像コンテンツを設定できます。
setAttribute() メソッドは、指定された属性を追加し、指定された値を割り当てます。この指定されたプロパティがすでに存在する場合、値は設定/変更されるだけです。
例:
<!DOCTYPE html>
<html>
<body>
<img src="img/1.jpg" style="max-width:90%"/ alt="JavaScriptで画像コンテンツを設定する方法" >
<p id="demo">点击按钮来改变img标签的内容。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
document.getElementsByTagName("img")[0].setAttribute("src","img/2.jpg");
}
</script>
</body>
</html>レンダリング:
JavaScript 上級チュートリアル]
以上がJavaScriptで画像コンテンツを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。