JavaScript | Thay đổi src của một phần tử: Ở đây, chúng ta sẽ tìm hiểu cách thay đổi src của một phần tử trong JavaScript?

Bạn đang xem : javascript lấy phần tử src

Làm cách nào để thay đổi src của một phần tử trong JavaScript?

JavaScript | Thay đổi src của một phần tử : Ở đây, chúng ta sẽ tìm hiểu cách thay đổi src của một phần tử trong JavaScript?

Đệ trình bởi Siddhant Verma , vào ngày 24 tháng 11 năm 2019

Chúng tôi biết rằng thẻ img trong HTML có một thuộc tính src được liên kết với nó để chỉ định nguồn của hình ảnh, URL hoặc đường dẫn đến hình ảnh đó. Chúng tôi có thể dễ dàng thay đổi nó bằng JavaScript và trong bài viết này, chúng tôi sẽ khám phá cách thức và trường hợp sử dụng quan trọng của tính năng này.

Hướng dẫn nhanh về thuộc tính src đặt hoặc trả về giá trị của thuộc tính src của hình ảnh bằng cách sử dụng thẻ img. Nó có thể được thay đổi dễ dàng bất cứ lúc nào bằng cách sử dụng JS tuy nhiên src của hình ảnh mới được chỉ định sẽ kế thừa và chiều cao và chiều rộng của hình ảnh đã được sử dụng trước đó trừ khi các thuộc tính này được đề cập khác.

Hãy tưởng tượng bạn nhấp vào một ảnh mới và muốn thay đổi ảnh đại diện của mình trên facebook. Hồ sơ Facebook của bạn có thể được hình dung như một trang HTML với thẻ img đại diện cho ảnh hồ sơ của bạn. Khi bạn tải lên một hình ảnh mới và nhấp vào tải lên, facebook sẽ thực sự thay đổi src của ảnh hồ sơ của bạn thành ảnh mới mà bạn đã tải lên! Hãy xây dựng thứ gì đó kiểu này ngay bây giờ,

 

& lt;

html

lang

=

"vi"

& gt;

& lt;

đầu

& gt;

& lt;

meta

bộ ký tự

=

"UTF-8"

& gt;

& lt;

meta

tên

=

"khung nhìn"

nội dung

=

"width = device-width, initial-scale = 1.0"

& gt;

& lt;

meta

http-equiv

=

"X-UA- Tương thích "

nội dung

=

" ie = edge "

& gt;

& lt;

tiêu đề

& gt;

Tài liệu

& lt; /

tiêu đề

& gt;

& lt;! - CSS được biên dịch và rút gọn - & gt;

& lt;

liên kết

rel

=

"bảng định kiểu"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize .min.css "

& gt;

& lt;! - JavaScript được biên dịch và rút gọn - & gt;

& lt;

tập lệnh

src

=

"https: // cdnjs. cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"

>

</

script < / p>

& gt;

& lt; /

đầu

& gt;

& lt;

phong cách

& gt;

cơ thể

{

nền

:

lam tím

;

}

thẻ

.

{

chiều cao

:

700

px

;

chiều rộng

:

400

px

;

}

.

card-image

img

{

chiều cao

:

400

px

;

chiều rộng

:

200

px

;

}

.

tải lên

{

vị trí

:

tương đối

;

đầu trang

:

-

600

px

;

đường viền

:

2

px

rắn

cá hồi

;

đệm

:

20

px

;

nền tảng

:

cá hồi

;

}

& lt; /

phong cách

& gt;

& lt;

nội dung

& gt;

& lt;

h1

lớp

=

"trung tâm màu trắng"

& gt;

Truyền thông xã hội

​​& lt; /

h1

& gt;

& lt;

div

lớp

=

"vùng chứa"

& gt;

& lt;

div

lớp

=

"hàng"

& gt;

& lt;

div

lớp

=

"col s12 m7"

& gt;

& lt;

div

lớp

=

"thẻ"

& gt;

& lt;

div

lớp

=

"card-image"

& gt;

& lt;

img

lớp

=

"profile-pic"

src

=

"https://images-na.ssl-images-amazon.com/images/I/71wiruqIZ9L ._SY606_.jpg "

alt

=

" "

& gt;

& lt; /

div

& gt;

& lt;

div

lớp

=

"card-content"

& gt;

& lt;

h3

& gt;

Ninja Rùa

& lt; /

h3

& gt ;

& lt;

h4

& gt;

Từ Los Angeles

& lt; /

h4

& gt;

& lt;

p

& gt;

Thích vẽ tranh và chơi đàn banjo

.

Bạn muốn ăn mứt? Kết nối với tôi tại [email được bảo vệ]

.

com

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

div

lớp

=

"tải lên ngay"

& gt;

& lt;

h4

lớp

=

"white-text"

& gt;

Thay đổi hình ảnh hồ sơ của bạn:

& lt; /

h4

& gt;

& lt;

đầu vào

nhập

=

"text"

trình giữ chỗ

=

"url của hình ảnh mới"

id

=

"url"

& gt;

& lt;

nút

lớp

=

"btn chữ đen ở giữa màu trắng "

& gt;

Nút thay đổi

​​& lt; /

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

nội dung

& gt;

& lt;

tập lệnh

& gt;

& lt; /

tập lệnh

& gt;

& lt; /

html

& gt;

Đầu ra

Chúng tôi có một thẻ đầu vào ở bên phải, thẻ này sẽ lấy URL của hình ảnh mới sẽ được tải lên. Khi nhấp vào nút thay đổi, chúng tôi cần kích hoạt trình xử lý sự kiện sẽ lấy giá trị của trường đầu vào và đặt URL đó làm nguồn hình ảnh bên trong thẻ img của thẻ hồ sơ của chúng tôi. Có lý không?

 

& lt;

tập lệnh

& gt;

document

.

querySelector

(

'

.btn

'

)

.

addEventListener

(

'

nhấp vào

'

,

(

)

=

& gt;

{

const

url

=

document

.

querySelector

(

'

#url

'

)

.

giá trị

;

bảng điều khiển

.

nhật ký

(

url

)

;

document

.

querySelector

(

'

.profile-pic

'

) < /p>

.

src

=

url

;

}

)

& lt; /

tập lệnh

& gt;

Đầu ra

Vì vậy, khi nhấp vào thay đổi, chúng tôi đã thay đổi thành công src hình ảnh của chúng tôi! Tuyệt vời.

Đây làm cách nào để thay đổi nguồn của một phần tử bằng JavaScript? Và sử dụng chức năng đó trong một số ứng dụng.

Ví dụ về JavaScript »

QUẢNG CÁO

QUẢNG CÁO


Xem thêm những thông tin liên quan đến chủ đề javascript lấy phần tử src

Master DOM Manipulation | JavaScript DOM Manipulation

  • Tác giả: CodeLab
  • Ngày đăng: 2022-02-17
  • Đánh giá: 4 ⭐ ( 7301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey there guys!

    Welcome to the Part 1/2 Master DOM Manipulation..in this video we will go over the fundamentals of the DOM, as well as looking at some more of the advanced aspects of the DOM…with plenty of examples along the way..i hope you enjoy. 🙂

    List of DOM Events:

    https://www.w3schools.com/jsref/dom_obj_event.asp

    🙂 SUBSCRIBE – hit the bell 🔔 and choose all: https://www.youtube.com/c/CodeLab98

    ——————
    Follow me on Social Media
    Instagram: https://www.instagram.com/code.lab98/

    Microphone I Use
    Blue Yeti USB Microphone: https://amzn.to/3wYPIH0
    RØDE PSA1 Arm: https://amzn.to/3lWU37t

    PC Specs
    MSI GeForce GTX 1660 SUPER VENTUS XS OC: https://amzn.to/3M53Nai
    Intel Core i9-11900K: https://amzn.to/3lSPJGp
    Kingston 480GB Q500: https://amzn.to/3NKDebA
    MSI MAG B560 TOMAHAWK: https://amzn.to/3lZbpQY
    MSI MAG FORGE 100R Mid Tower: https://amzn.to/3awoBum
    27″ Ultrasharp 4k Monitor: https://amzn.to/3z6IyC9
    PINKCAT, Wireless Keyboard and Mouse Set: https://amzn.to/3abeyuB

    ——————
    TIMESTAMPS

    00:00 – Introduction
    00:23 – Prerequisites
    00:58 – Tools needed for the Course
    01:13 – Structure of Course
    01:25 – What is he DOM?
    01:58 – DOM Tree Analogy
    03:54 – Selecting Elements in the DOM
    11:37 – Styling an Element
    16:26 – Creating Elements
    17:25 – Adding Elements
    18:26 — Modify Text
    21:08 – Modifying Elements Attributes & Classes
    24:52 – Remove an Element
    25:40 – DOM Tree Recap
    27:51 – Traversing the DOM
    37:41 – Event Listeners
    44:52 – Event Listener Example
    50:09 – Event Propagation
    1:00:00 – Event Delegation

    ——————

    👍 HTML FULL TUTORIAL: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSECwci9yCGpUNaC-XT6YDln

    👍 CSS FULL TUTORIAL: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSFypjUr-ntQPlIpGO38P1xc

    👍 FIVE-MINUTE FRIDAYS TUTORIALS: https://www.youtube.com/playlist?list=PL-GJ2ovkUZSFWFbBAt4KTFh_WuHkYJEC8
    ——————
    Learn with Code Lab! easy to understand tutorials 🙂

    DISCLAIMERS:
    I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.

Get / Set thuộc tính thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 5347 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu cách get, set và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM.

jQuery: lấy về giá trị thuộc tính src trong phần tử img

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 5266 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mọi người cho em hỏi để lấy về giá trị của thuộc tính src từ một phần tử img?

Tổng hợp các hàm xử lý mảng hay dùng trong Javascript

  • Tác giả: suntech.edu.vn
  • Đánh giá: 4 ⭐ ( 9688 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp các hàm xử lý mảng thường sử dụng trong Javascript dành cho dev

Giáo trình JavaScript: Đối tượng Form trong JavaScript

  • Tác giả: www.voer.edu.vn
  • Đánh giá: 4 ⭐ ( 3143 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Form trong JavaScript (giáo trình – tài liệu – học liệu từ VOER)

Làm cách nào để kiểm tra xem các phần tử được cung cấp trong một mảng đã vượt qua một điều kiện cụ thể hay chưa trong JavaScript?

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 3 ⭐ ( 4875 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

3 cách lấy thành phần dom bằng câu lệnh Javascript và sử dụng các sự kiện cơ bản

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 3289 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DOM là gì? Cách lấy thành phần DOM bằng câu lệnh Javascript như thế nào? Cách sử dụng sự kiện ra sao? Hãy cùng giải đáp những câu hỏi này qua bài viết dưới đây.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm cách nào để thêm dòng ngang trong HTML? - quy tắc ngang trong html

By ads_php