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

[PVS]

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

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

JavaScript

$(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

$(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

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

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

    //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​