Heim Web-Frontend js-Tutorial So legen Sie IMG-Inhalte in Javascript fest

So legen Sie IMG-Inhalte in Javascript fest

Jul 26, 2021 pm 06:28 PM
javascript

Der Inhalt des img-Tags wird hauptsächlich durch das src-Attribut gesteuert. In JavaScript können Sie den Wert des src-Attributs des img-Tags festlegen und dann den img-Inhalt festlegen „img element object.setAttribute(„src“, „Attributwert“)“.

So legen Sie IMG-Inhalte in Javascript fest

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer. Das

So legen Sie IMG-Inhalte in Javascript fest-Tag definiert ein Bild in einer HTML-Seite. Das

So legen Sie IMG-Inhalte in Javascript fest-Tag hat zwei erforderliche Attribute: src und alt.

Das src-Attribut des src-Tags ist erforderlich. Es gibt die URL des Bildes an.

Wenn eine Webseite geladen wird, ruft der Browser das Bild vom Webserver ab und fügt es in die Seite ein. Stellen Sie daher sicher, dass sich das Bild an derselben Stelle wie die entsprechende Webseite befindet, da Besucher sonst möglicherweise ein Symbol für einen defekten Link sehen. Wenn der Browser das Bild nicht finden kann, wird ein Symbol für einen defekten Link angezeigt.

Javascript legt den IMG-Inhalt fest

In Javascript können Sie die setAttribute()-Methode verwenden, um den IMG-Inhalt festzulegen. Die Methode

setAttribute() fügt das angegebene Attribut hinzu und weist ihm den angegebenen Wert zu. Wenn diese angegebene Eigenschaft bereits vorhanden ist, wird der Wert nur gesetzt/geändert.

Beispiel:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"/ alt="So legen Sie IMG-Inhalte in Javascript fest" >

 

<p id="demo">点击按钮来改变img标签的内容。</p>

 

<button onclick="myFunction()">试一下</button>

 

<script>

function myFunction()

{

document.getElementsByTagName("img")[0].setAttribute("src","img/2.jpg");

}

</script>

 

</body>

</html>

Nach dem Login kopieren

Rendering:

So legen Sie IMG-Inhalte in Javascript fest

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo legen Sie IMG-Inhalte in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

So verwenden Sie insertBefore in Javascript

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript

See all articles