Lấy giá trị trong 1 thuộc tính của thẻ, sử dụng x.getAttribute()

Code: Default | Auth: 03cd82

Khi xây dựng ứng dụng sẽ có nhiều lúc bạn cần truyền dữ liệu cho các chức năng mà không thể gửi thông qua tên biến nên giải pháp là bạn có thể sử dụng cách gửi dữ liệu vào thuộc tính trong thẻ html. Hoặc có nhiều tình huống buộc bạn phải lấy giá trị trong thuộc tính nào đó, vd như lấy link ảnh trong thẻ img...

Các bước thực hiện như sau:

1. khai báo biến để nhận phần tử html


var objImg = document.querySelector('img'); // lấy phần tử img đầu tiên của trang html

2. khai báo biến để lấy thuộc tính

var link = objImg.getAttribute("src"); // trong hàm này truyền vào tên của thuộc tính để lấy giá trị

và sau đó thì bạn có thể dùng biến link ở trên để dùng vào việc của bạn.
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://saophaixoan.net</title>
</head>

<body>
    <h1 id="id1">Thực hành lấy giá trị trong 1 thuộc tính của thẻ </h1>
    <img src="https://saophaixoan.net/data/avatars/s/0/2.jpg" />

    <script>
        //1. khai báo biến để nhận phần tử html
        var objImg = document.querySelector('img'); // lấy phần tử img đầu tiên của trang html

        //2. khai báo biến để lấy thuộc tính
        var link = objImg.getAttribute("src"); // trong hàm này truyền vào tên của thuộc tính để lấy giá trị
        // bạn có thể áp dụng với bất kỳ thuộc tính nào khác.

        //giờ thì bạn có thể dùng link này để làm việc gì đó thì làm...
        document.write(link);
    </script>

</body>
</html>