Lấy giá trị và thiết lập giá trị thuộc tính phần tử HTML bằng jQuery

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,128
Được Like
12,742
Lấy giá trị và thiết lập giá trị thuộc tính phần tử HTML bằng jQuery

Chúng ta có thể tương tác lấy, gán giá trị cho thuộc tính HTML (href, src, id, class, style ... ) rất dễ dàng thông qua jQuery. Phương thức attr() sử dụng để lấy giá trị thuộc tính và gán giá trị thuộc tính.
  • attr(attr_name) : lấy giá trị của thuộc tính có tên attr_name
  • attr(attr_name, attr_val) : gián giá trị attr_val vào thuộc tính attr_name
Lấy thuộc tính
Ví dụ trong HTMl của bạn có phần tử thẻ <a> với id là 'exam', giờ ta dùng attr() để lấy giá trị thuộc tính href

HTML
Mã:
<a id="exam" href="https://vnxf.vn/">
   Bấm vào đây
</a>

JavaScript
Mã:
$(function() {
  var val = $("a#exam").attr("href");
  alert(val);
});

// Hiện thị thông báo : https://vnxf.vn/

Gán giá trị cho thuộc tính
Trở lại ví dụ trên, giờ viết JavaScript / jQuery để thay đổi thuộc tính href thanh địa chỉ link mới : google.com.vn

JavaScript
Mã:
$(function() {

    $("a#exam").attr("href", "https://www.google.com.vn/");

});

Kiểm tra một thuộc tính tồn tại với jQuery
Cách 1
Mã:
var attr = $("selector").attr('name');
if (typeof attr !== typeof undefined && attr !== false) {
  // Có thuộc tính name
}
else {
  // không có thuộc tính name
}

Cách 2 - Sử dụng hàm JavaScript
Mã:
if ($("selector")[0].hasAttribute('name')) {
    // có thuộc tính name
}
else {
  // không có thuộc tính name
}

Loại bỏ thuộc tính HTML
Thuộc tính của phần tử HTML có thể xóa bỏ khỏi phần tử bằng phương thức removeAttr(attr_name)

Xem một số ví dụ

JavaScript
Mã:
    //xóa bỏ thuộc tính border khỏi phần tử table
    $("table").removeAttr("border");

    //xóa bỏ thuộc tính class khỏi phần tử div
    $("div").removeAttr("class");

    //xóa bỏ thuộc tính title khỏi phần tử a
    $("table").removeAttr("title");

Chúc các bạn thành công.


Nguồn: Internet​
 

Top Bottom