Thuộc tính data- * HTML được sử dụng để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang hoặc ứng dụng. Thuộc tính data- * HTML cung cấp cho chúng tôi khả năng nhúng các thuộc tính dữ liệu tùy chỉnh trên tất cả các phần tử HTML. Sau đó, dữ liệu được lưu trữ (tùy chỉnh) có thể được sử dụng trong JavaScript của trang. Để tạo trải nghiệm người dùng hấp dẫn hơn (không có bất kỳ lệnh gọi Ajax hoặc truy vấn cơ sở dữ liệu phía máy chủ nào).

Thuộc tính data- * bao gồm hai phần:

1. Tên thuộc tính không được chứa bất kể vần âm viết hoa nào và phải dài tối thiểu một ký tự sau tiền tố “ data – “

2. Giá trị thuộc tính có thể là bất kỳ chuỗi nào

   Bạn đang đọc: Thuộc tính data-* HTML » HuongDan360.Net

Lưu ý:

Các thuộc tính tùy chỉnh có tiền tố là “data-” sẽ bị tác nhân người dùng hoàn toàn bỏ qua.

Cú Pháp Thuộc Tính data- * HTML

Giá Trị Thuộc Tính data- * HTML

Giá trị	Mô tả
somevalue	Chỉ định giá trị của thuộc tính ( dưới dạng một chuỗi )

Ví dụ:

Sử dụng thuộc tính data- * để nhúng dữ liệu tùy chỉnh.

Trình Duyệt Hỗ Trợ data- * HTML

Thuộc tính
data-*	4.0	5.5	2.0	3.1	9.6

Phương thức HTML DOM getAttribute()

Phương thức getAttribute() trả về giá trị của thuộc tính có tên được chỉ định, của một phần tử.

Mẹo:

Sử dụng phương thức getAttributeNode() nếu bạn muốn trả về thuộc tính dưới dạng một đối tượng Attr.

Cú pháp getAttribute()

element.getAttribute(attributename)

Giá trị tham số getAttribute()

Tham số	Kiểu	Mô tả
attributename	String	Yêu cầu. Tên của thuộc tính bạn muốn nhận được giá trị từ

Phương thức
getAttribute()	Yes	Yes	Yes	Yes	Yes

Phuong Thức HTML DOM hasAttribute ( )

Phương thức hasAttribute() trả về true nếu thuộc tính được chỉ định tồn tại, nếu không, nó trả về false.

Mẹo:

Sử dụng

Sử dụng setAttribute() để thêm thuộc tính mới hoặc thay đổi giá trị của thuộc tính hiện có trên một phần tử.

Cú pháp hasAttribute()

element.hasAttribute(attributename)

Giá trị tham số hasAttribute()

Tham số	Kiểu	Mô tả
attributename	String	Yêu cầu. Tên của thuộc tính bạn muốn kiểm tra xem có tồn tại không

Chi tiết kỹ thuật

Return Value:	Một Boolean, trả về true nếu phần tử có thuộc tính, ngược lại là false
DOM Version	Core Level 2 Element Object

Ví dụ 1: Tìm hiểu xem phần tử có thuộc tính onclick hay không.

var x = document.getElementById(" myBtn ").hasAttribute(" onclick ");

See the Pen HTML – DOM hasAttribute ( ) 1 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Ví dụ 2: Tìm hiểu xem phần tử có thuộc tính đích hay không. Nếu vậy, hãy thay đổi giá trị của thuộc tính đích thành “_self”.

// Get the  element with id="myAnchor"
var x = document.getElementById("myAnchor"); 

// If the  element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {      
  x.setAttribute("target", "_self");
}

See the Pen HTML – DOM hasAttribute ( ) 2 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Trình Duyệt Hỗ Trợ hasAttribute()

Phương thức
hasAttribute()	Yes	9.0	Yes	Yes	Yes

Phuong Thức HTML DOM removeAttribute ( )

Phương thức removeAttribute ( ) xóa thuộc tính đã chỉ định khỏi một thành phần. Sự độc lạ giữa phương pháp này và phương pháp removeAttributeNode ( ) là phương pháp removeAttributeNode ( ) vô hiệu đối tượng người tiêu dùng Attr được chỉ định, trong khi phương pháp này vô hiệu thuộc tính có tên được chỉ định. Kết quả sẽ giống nhau. Ngoài ra, phương pháp này không có giá trị trả về, trong khi phương pháp removeAttributeNode ( ) trả về thuộc tính đã vô hiệu, dưới dạng một đối tượng người dùng Attr .

Mẹo: Sử dụng phương thức Sử dụng phương pháp getAttribute ( ) để trả về giá trị của một thuộc tính của một thành phần .Mẹo: Sử dụng phương thức Sử dụng phương pháp setAttribute ( ) để thêm thuộc tính vào một thành phần .

Cú pháp removeAttribute()

element.removeAttribute(attributename)

Giá trị tham sốremoveAttribute()

Tham số	Kiểu	Mô tả
attributename	String	Yêu cầu .Tên của thuộc tính bạn muốn xóaChi tiết kỹ thuật

Chi tiết kỹ thuật

Return Value:	Không có giá trị trả về
DOM Version	Core Level 2 Element Object

Ví dụ 1: Xóa thuộc tính lớp khỏi phần tử

:

document.getElementsByTagName("H1")[].removeAttribute("class");

See the Pen HTML – DOM removeAttribute ( ) 1 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Ví dụ 2: Xóa thuộc tính href khỏi phần tử :

document.getElementById("myAnchor").removeAttribute("href");

See the Pen HTML – DOM removeAttribute ( ) 2 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Trình Duyệt Hỗ Trợ removeAttribute()

Phương thức
removeAttribute()	Yes	Yes	Yes	Yes	Yes

Phuong Thức HTML DOM setAttribute ( )

Phương thức setAttribute ( ) thêm thuộc tính đã chỉ định vào một thành phần và cung ứng cho nó giá trị được chỉ định. Nếu thuộc tính được chỉ định đã sống sót, chỉ giá trị được đặt / đổi khác .

Lưu ý:

Mặc dù có thể thêm thuộc tính style với một giá trị vào một phần tử bằng phương pháp này, nhưng bạn nên sử dụng các thuộc tính của đối tượng Style để tạo kiểu nội tuyến, vì điều này sẽ không ghi đè các thuộc tính CSS khác có thể được chỉ định trong thuộc tính style:

• Bad: element.setAttribute("style", "background-color: red;");

• Good: element.style.backgroundColor = "red";

Mẹo:

Sử dụng phương thức Sử dụng phương pháp removeAttribute ( ) để xóa một thuộc tính khỏi một thành phần .

Mẹo:

Xem thêm phương thức setAttributeNode().

Cú pháp setAttribute()

element.setAttribute(attributename, attributevalue)

Giá trị tham số setAttribute()

Tham số	Kiểu	Mô tả
attributename	String	Yêu cầu. Tên của thuộc tính bạn muốn thêm
attributevalue	String	Yêu cầu. Giá trị của thuộc tính bạn muốn thêm

Chi tiết kỹ thuật

Return Value:	Không có giá trị trả về
DOM Version	Core Level 1 Element Object

Ví dụ 1: Thêm thuộc tính class với giá trị “Democlass” vào phần tử

:

document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");

– Trước khi đặt thuộc tính :

Hello World

– Sau khi đặt thuộc tính :

Hello World

See the Pen HTML – DOM estAttribute ( ) 1 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Ví dụ 2: Thay đổi trường đầu vào thành nút đầu vào:

document.getElementsByTagName("INPUT")[].setAttribute("type", "button");

– Trước khi đặt thuộc tính :

– Sau khi đặt thuộc tính :

See the Pen HTML – DOM setAttribute ( ) 2 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Ví dụ 3: Thêm thuộc tính href có giá trị là “HuongDan360.net” vào phần tử :

document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");

– Trước khi đặt thuộc tính :
Go to HuongDan360. net
– Sau khi đặt thuộc tính :
Go to HuongDan360. net

See the Pen HTML – DOM setAttribute ( ) 3 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Ví dụ 4: Tìm hiểu xem phần tử có thuộc tính đích hay không. Nếu vậy, hãy thay đổi giá trị của thuộc tính đích thành “_self”:

// Get the  element with id="myAnchor"
var x = document.getElementById("myAnchor"); 

// If the  element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {      
  x.setAttribute("target", "_self");
}

See the Pen HTML – DOM setAttribute ( ) 4 by Do Phuong Nguyen ( @ xiluom78 ) on CodePen .

Trình Duyệt Hỗ Trợ setAttribute()

Phương thức
removeAttribute()	Yes	Yes	Yes	Yes	Yes

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

__Pass: TTpass123 ! @ # Hoặc taitot.com

Source: http://wp.ftn61.com
Category: Hỏi Đáp