- 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.
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
JavaScript
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
Kiểm tra một thuộc tính tồn tại với jQuery
Cách 1
Cách 2 - Sử dụng hàm JavaScript
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
Chúc các bạn thành công.
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
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
Bài viết liên quan
Bài viết mới