Home > Web Front-end > JS Tutorial > How to change src in javascript

How to change src in javascript

醉折花枝作酒筹
Release: 2023-01-05 16:08:06
Original
7636 people have browsed it

How to change src in javascript: First use the "document.getElementById("id value")" statement to obtain the element object according to the specified id value; then use the src attribute to change the src value of the element, the syntax is "element object. src="value";".

How to change src in javascript

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

Create a new HTML file named test.html to explain how JavaScript can dynamically change the src attribute of the img tag.

How to change src in javascript

In the test.html file, use the img tag to create an image and set its id attribute to mypic, which is mainly used to obtain the image object using js below.

How to change src in javascript

In the test.html file, use the button tag to create a button with the button name "Change src attribute".

How to change src in javascript

In the test.html file, bind the onclick event to the button button. When the button is clicked, execute the cc() function.

How to change src in javascript

In the test.html file, in the js tag, create a cc() function. Within the function, use the getElementById() method to obtain the image object by id.

How to change src in javascript

In the cc() function, change the src attribute of the image by assigning a value to the src attribute of the img object. For example, set the src attribute of the image to 3.jpg .

How to change src in javascript

Open the test.html file in the browser and click the button to see the effect.

How to change src in javascript

How to change src in javascript

Recommended learning: javascript video tutorial

The above is the detailed content of How to change src in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template