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" p>
& gt;
& lt;
meta
tên
=
"khung nhìn"
nội dung
=
"width = device-width, initial-scale = 1.0"
& gt; p>
& 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-imageimg
{
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" p >
& 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" p>
& gt;
& lt;
div
lớp
=
"thẻ"
& gt;
& lt;
div
lớp
=
"card-image" p>
& gt;
& lt;
img
lớp
=
"profile-pic" p>
src
=
"https://images-na.ssl-images-amazon.com/images/I/71wiruqIZ9L ._SY606_.jpg "
alt
=
" "
& gt;
& lt; /
div
& gt;
& lt;
div
lớp
=
"card-content" p>
& 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" p >
& gt;
& lt;
h4
lớp
=
"white-text" p>
& 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 p >
=
"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
'
) p >
.
addEventListener(
'
nhấp vào
'
,
(
)
=
& gt;
{
const
url=
document.
querySelector(
'
#url p>
'
)
.
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/3lWU37tPC 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——————
TIMESTAMPS00: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