Quảng cáo
Document createAttribute() trong Javascript
Trong bài này freetuts sẽ hướng dẫn cách dùng phuong thức createAttribute trong javascript, createAttribute javascript dùng để tạo thuộc tính cho các đối tượng HTML.
1. Document createAttribute là gì?
Document createAttribute là một phương thức thuộc đối tượng document, dùng để tạo một đối tượng thuộc tính, sau đó có thể gắn cho các thẻ HTML.
Quảng cáo
- Phương thức
createAttribute()sẽ tạo ra một thuộc tính, tuy nhiên thuộc tính này sẽ chỉ được xác định tên mà chưa có bất kì giá trị nào, phương thức sẽ trả về thuộc tính dưới dạng một đối tượng (Attr object). - Sử dụng phương thức
attribute.valuecủa Attr object để thiết lập giá trị cho thuộc tính. - Sử dụng phương thức
element.setAttributeNode()để thiết lập thuộc tính đã tạo cho một phần tử html. - Thông thường, chúng ta hay sử dụng phương thức
element.setAttribute()để thay thế cho phương thứccreateAttribute().
Cú pháp như sau:
document.createAttribute(attributename)
Trong đó:
attributenamelà tên của thuộc tính, có thể là class, id, type..
Ví dụ: Tạo thuộc tính id và đặt tên cho nó là result.
let id = document.createAttribute('id');
id.value = "result";Bây giờ bạn có thể sử dụng phương thức setAttributeNode để thêm thuộc tính này vào một thẻ HTML nào đó.
Quảng cáo
htmlObj.setAttributeNode(id);
2. Cách dùng document createAttribute javascript
Tạo thuộc tính id, gán giá trị cho nó và gắn thuộc tính vừa tạo vào thẻ H1 để định dạng cho thẻ H1 dựa vào id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
color: red;
}
</style>
</head>
<body>
<h1>Học lập trình miễn phí tại freetuts.net</h1>
<p id="result"></p>
<button onclick="myFunction()">Xem kết quả</button>
<script>
function myFunction() {
var h1 = document.getElementsByTagName("H1")[0]; // lấy phần tử h1
var att = document.createAttribute("id"); // tạo thuộc tính id
att.value = "test"; // gán giá trị cho thuộc tính id
h1.setAttributeNode(att); // gắn thuộc tính id với giá trị cho thẻ h1
}
</script>
</body>
</html>Thẻ h1 sẽ đổi màu vì mình đã định dạng cho phần tử có id="test" trước đó trong thẻ style.
Quảng cáo
Các chủ đề liên quan:
Bài viết cùng chuyên mục:
- Cách gộp hai object javascript lại với nhau
- Cách lấy chiều dài của object trong Javascript
- Hướng dẫn giải phương trình bậc 1 bằng Javascript
- Cách dùng nextSibling trong javascript
- Cách dùng insertAdjacentHTML trong javascript
- Cách dùng innerHTML trong Javascript
- Cách dùng insertBefore trong javascript
- Cách dùng insertAfter trong Javascript
- Cách dùng parentNode trong Javascript
- Cách dùng parentElement trong Javascript
- Tính tổng các phần tử trong mảng javascript
- Tính tổng hai số bằng Javascript (cộng hai số)
- Cách gán giá trị cho thẻ input trong javascript
- Cách kiểm tra số nguyên âm trong javascript
- Cách kiểm tra số nguyên dương trong javascript
- Hàm closure trong javascript
- Biểu thức chính quy RegEx trong Javascript
- Cách dùng Import / Export Module trong javascript
- Cơ chế hoạt động của hoisting trong Javascript
- Cấp độ private / protected của class trong Javascript
Quảng cáo
