JavaScriptで画像コンテンツを設定する方法-jsチュートリアル-php.cn

JavaScriptで画像コンテンツを設定する方法

青灯夜游

リリース： 2023-01-07 11:45:45

オリジナル

5967 人が閲覧しました

img タグのコンテンツは主に src 属性によって制御されます。JavaScript では、setAttribute() メソッドを使用して img タグの src 属性の値を設定し、その後 img コンテンツを設定できます。構文は「img element object.setAttribute("src" ,"プロパティ値")」です。

JavaScriptで画像コンテンツを設定する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScriptで画像コンテンツを設定する方法タグは、HTML ページ内の画像を定義します。

JavaScriptで画像コンテンツを設定する方法タグには、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で画像コンテンツを設定する方法