Chúng ta đã thảo luận ngắn gọn về các thuộc tính trong phần Tổng quan về HTML; giờ là lúc tìm hiểu sâu hơn.
Thuộc tính là yếu tố giúp HTML trở nên mạnh mẽ. Thuộc tính là các tên được phân tách bằng dấu cách và các cặp tên/giá trị xuất hiện trong thẻ mở, cung cấp thông tin và chức năng cho phần tử.
Thuộc tính xác định hành vi, mối liên kết và chức năng của các phần tử. Một số thuộc tính là thuộc tính chung, nghĩa là chúng có thể xuất hiện trong thẻ mở của bất kỳ phần tử nào. Một số thuộc tính khác áp dụng cho một số phần tử nhưng không phải tất cả, trong khi một số thuộc tính khác là dành riêng cho phần tử, chỉ liên quan đến một phần tử duy nhất. Trong HTML, tất cả các thuộc tính ngoại trừ boolean và một số thuộc tính được liệt kê đều yêu cầu giá trị.
Nếu giá trị thuộc tính có chứa dấu cách hoặc ký tự đặc biệt, thì giá trị đó phải được đặt trong dấu ngoặc kép. Vì lý do này và để cải thiện khả năng đọc, bạn luôn nên trích dẫn.
Mặc dù HTML không phân biệt chữ hoa chữ thường, nhưng một số giá trị thuộc tính lại phân biệt. Các giá trị thuộc quy cách HTML không phân biệt chữ hoa chữ thường. Các giá trị chuỗi được xác định, chẳng hạn như tên lớp và tên mã nhận dạng, sẽ phân biệt chữ hoa chữ thường. Nếu một giá trị thuộc tính phân biệt chữ hoa chữ thường trong HTML, thì giá trị đó sẽ phân biệt chữ hoa chữ thường khi được dùng trong bộ chọn thuộc tính trong CSS và JavaScript; nếu không, giá trị đó sẽ không phân biệt chữ hoa chữ thường.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Thuộc tính boolean
Nếu có thuộc tính boolean, thì thuộc tính đó luôn đúng. Các thuộc tính Boolean bao gồm autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, và selected.
Nếu có một (hoặc nhiều) thuộc tính trong số này, phần tử sẽ bị vô hiệu hoá, bắt buộc, chỉ có thể đọc, v.v. Nếu không có thuộc tính nào trong số này, phần tử sẽ không bị vô hiệu hoá.
Bạn có thể bỏ qua giá trị boolean, đặt thành chuỗi trống hoặc đặt thành tên của thuộc tính; nhưng giá trị không nhất thiết phải được đặt thành chuỗi true. Tất cả các giá trị, bao gồm cả true, false và 😀, mặc dù không hợp lệ, sẽ được phân giải thành true.
Ba thẻ này tương đương nhau:
<input required>
<input required="">
<input required="required">
Nếu giá trị thuộc tính là false, hãy bỏ qua thuộc tính đó. Nếu thuộc tính này là đúng, hãy thêm thuộc tính nhưng không cung cấp giá trị.
Ví dụ: required="required" không phải là giá trị hợp lệ trong HTML; nhưng vì required là boolean, nên các giá trị không hợp lệ sẽ chuyển thành true.
Tuy nhiên, vì các thuộc tính liệt kê không hợp lệ không nhất thiết phải phân giải thành cùng một giá trị với các giá trị bị thiếu, nên bạn nên tập thói quen bỏ qua các giá trị thay vì nhớ thuộc tính nào là boolean so với thuộc tính liệt kê và có thể cung cấp giá trị không hợp lệ.
Khi chuyển đổi giữa true và false, hãy thêm và xoá thuộc tính cùng lúc bằng JavaScript thay vì chuyển đổi giá trị.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Xin lưu ý rằng trong các ngôn ngữ XML, chẳng hạn như SVG, tất cả các thuộc tính đều cần có giá trị, bao gồm cả thuộc tính boolean.
Thuộc tính được liệt kê
Đôi khi, các thuộc tính được liệt kê bị nhầm lẫn với các thuộc tính boolean. Đây là các thuộc tính HTML có một tập hợp các giá trị hợp lệ được xác định trước.
Giống như các thuộc tính boolean, các thuộc tính này có giá trị mặc định nếu thuộc tính có nhưng thiếu giá trị. Ví dụ: nếu bạn thêm <style contenteditable>, thì giá trị mặc định sẽ là <style contenteditable="true">.
Tuy nhiên, không giống như các thuộc tính boolean, việc bỏ qua thuộc tính không có nghĩa là thuộc tính đó là sai; một thuộc tính hiện tại bị thiếu giá trị không nhất thiết phải là đúng; và giá trị mặc định cho các giá trị không hợp lệ không nhất thiết phải giống với chuỗi rỗng. Tiếp tục ví dụ, contenteditable mặc định là inherit nếu bị thiếu hoặc không hợp lệ và có thể được đặt rõ ràng thành false.
Giá trị mặc định tuỳ thuộc vào thuộc tính. Không giống như giá trị boolean, các thuộc tính không tự động "đúng" nếu có. Nếu bạn đưa <style contenteditable="false"> vào, phần tử này sẽ không chỉnh sửa được. Nếu giá trị không hợp lệ, chẳng hạn như <style contenteditable="😀"> hoặc <style contenteditable="contenteditable">, thì giá trị này sẽ không hợp lệ và mặc định là inherit.
Trong hầu hết các trường hợp có thuộc tính được liệt kê, giá trị bị thiếu và không hợp lệ đều giống nhau. Ví dụ: nếu thuộc tính type trên <input> bị thiếu, có nhưng không có giá trị hoặc có giá trị không hợp lệ, thì thuộc tính này sẽ mặc định là text. Mặc dù hành vi này phổ biến, nhưng không phải là quy tắc.
Do đó, bạn cần biết thuộc tính nào là boolean và thuộc tính nào là được liệt kê; bỏ qua các giá trị nếu có thể để không bị nhầm lẫn và tra cứu giá trị nếu cần.
Thuộc tính chung
Thuộc tính chung là các thuộc tính có thể được đặt trên bất kỳ phần tử HTML nào, bao gồm cả các phần tử trong <head>. Có hơn 30 thuộc tính chung. Mặc dù về lý thuyết, bạn có thể thêm tất cả các thuộc tính này vào bất kỳ phần tử HTML nào, nhưng một số thuộc tính chung sẽ không có hiệu lực khi được đặt trên một số phần tử; ví dụ: đặt hidden trên <meta> vì nội dung meta không hiển thị.
id
Thuộc tính toàn cục id được dùng để xác định giá trị nhận dạng duy nhất cho một phần tử. Mã này phục vụ nhiều mục đích, bao gồm: – Mục tiêu của giá trị nhận dạng mảnh của đường liên kết.
– Xác định một phần tử để tạo tập lệnh.
– Liên kết phần tử biểu mẫu với nhãn của phần tử đó.
– Cung cấp nhãn hoặc nội dung mô tả cho công nghệ hỗ trợ.
– Kiểu nhắm mục tiêu có (độ cụ thể cao hoặc dưới dạng bộ chọn thuộc tính) trong CSS.
Giá trị id là một chuỗi không có dấu cách. Nếu chứa dấu cách, tài liệu sẽ không bị ngắt, nhưng bạn sẽ phải nhắm mục tiêu đến id bằng các ký tự thoát trong HTML, CSS và JS. Tất cả các ký tự khác đều hợp lệ. Giá trị id có thể là 😀 hoặc .class, nhưng không nên dùng. Để việc lập trình trở nên dễ dàng hơn cho chính bạn hiện tại và sau này, hãy đặt ký tự đầu tiên của id là một chữ cái và chỉ sử dụng chữ cái, chữ số, _ và - ASCII. Bạn nên đưa ra quy ước đặt tên id rồi tuân thủ quy ước đó, vì các giá trị id có phân biệt chữ hoa chữ thường.
id phải là duy nhất cho tài liệu. Bố cục của trang có thể sẽ không bị lỗi nếu bạn sử dụng id nhiều lần, nhưng các hoạt động tương tác với JavaScript, đường liên kết và phần tử có thể không hoạt động như mong đợi.
Mã nhận dạng mảnh liên kết
Thanh điều hướng bao gồm 4 đường liên kết. Chúng ta sẽ đề cập đến phần tử đường liên kết sau, nhưng hiện tại, hãy lưu ý rằng đường liên kết không chỉ giới hạn ở URL dựa trên HTTP; chúng có thể là giá trị nhận dạng mảnh đến các phần của trang trong tài liệu hiện tại (hoặc trong các tài liệu khác).
Trên trang web của hội thảo về máy học, thanh điều hướng trong tiêu đề trang có 4 đường liên kết:
Thuộc tính href cung cấp siêu liên kết mà khi kích hoạt, người dùng sẽ được chuyển đến. Khi một URL bao gồm dấu thăng (#) theo sau là một chuỗi ký tự, thì chuỗi đó là giá trị nhận dạng mảnh. Nếu chuỗi đó khớp với id của một phần tử trong trang web, thì mảnh đó là một neo hoặc dấu trang đến phần tử đó. Trình duyệt sẽ cuộn đến điểm được xác định là neo.
Bốn đường liên kết này trỏ đến bốn phần của trang được xác định bằng thuộc tính id. Khi người dùng nhấp vào bất kỳ đường liên kết nào trong số bốn đường liên kết trên thanh điều hướng, phần tử được liên kết bằng giá trị nhận dạng mảnh, phần tử chứa mã nhận dạng phù hợp trừ #, sẽ cuộn vào chế độ xem.
Nội dung <main> của hội thảo về học máy có 4 phần với mã nhận dạng. Khi khách truy cập trang web nhấp vào một trong các đường liên kết trong <nav>, phần có giá trị nhận dạng mảnh đó sẽ cuộn vào chế độ xem. Mã đánh dấu tương tự như:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Khi so sánh giá trị nhận dạng mảnh trong các đường liên kết <nav>, bạn sẽ thấy rằng mỗi giá trị khớp với id của <section> trong <main>.
Trình duyệt cung cấp cho chúng ta một đường liên kết "đầu trang" miễn phí. Việc đặt href="#top", không phân biệt chữ hoa chữ thường hoặc chỉ đơn giản là href="#", sẽ cuộn người dùng lên đầu trang.
Dấu phân cách dấu thăng trong href không phải là một phần của giá trị nhận dạng mảnh. Mã nhận dạng mảnh luôn là phần cuối cùng của URL và không được gửi đến máy chủ.
Công cụ chọn CSS
Trong CSS, bạn có thể nhắm đến từng phần bằng cách sử dụng bộ chọn mã nhận dạng, chẳng hạn như #feedback hoặc nếu muốn ít cụ thể hơn, hãy sử dụng bộ chọn thuộc tính [id="feedback"] phân biệt chữ hoa chữ thường.
Lên nội dung
Trên MLW.com, có một quả trứng phục sinh chỉ dành cho người dùng chuột. Khi nhấp vào nút bật/tắt đèn, trang sẽ bật và tắt.
Mã đánh dấu cho hình ảnh nút chuyển đèn là:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
Bạn có thể sử dụng thuộc tính id làm tham số cho phương thức getElementById() và với tiền tố #, làm một phần của tham số cho phương thức querySelector() và querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Một hàm JavaScript của chúng ta sử dụng khả năng này để nhắm mục tiêu các phần tử theo thuộc tính id của chúng:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
Phần tử <label> HTML có thuộc tính for lấy giá trị là id của thành phần điều khiển biểu mẫu liên kết với phần tử đó.
Việc tạo nhãn rõ ràng bằng cách đưa id vào mọi thành phần điều khiển biểu mẫu và ghép nối từng thành phần với thuộc tính for của nhãn đảm bảo rằng mọi thành phần điều khiển biểu mẫu đều có nhãn liên kết.
Mặc dù mỗi nhãn có thể liên kết với đúng một thành phần điều khiển biểu mẫu, nhưng một thành phần điều khiển biểu mẫu có thể có nhiều nhãn được liên kết.
Nếu thành phần điều khiển biểu mẫu được lồng giữa thẻ mở và thẻ đóng <label>, thì bạn không bắt buộc phải sử dụng thuộc tính for và id: đây được gọi là nhãn "ngầm ẩn". Nhãn cho phép tất cả người dùng biết mục đích của từng thành phần điều khiển biểu mẫu.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
Mối liên kết giữa for và id cung cấp thông tin cho người dùng công nghệ hỗ trợ. Ngoài ra, việc nhấp vào vị trí bất kỳ trên nhãn sẽ đặt tiêu điểm vào phần tử được liên kết, mở rộng vùng nhấp của thành phần điều khiển. Điều này không chỉ hữu ích cho những người gặp vấn đề về sự khéo léo khiến việc sử dụng chuột kém chính xác hơn; mà còn giúp mọi người dùng thiết bị di động có ngón tay rộng hơn nút chọn.
Trong ví dụ về mã này, câu hỏi thứ năm giả mạo của một bài kiểm tra giả mạo là một câu hỏi trắc nghiệm có một lựa chọn. Mỗi thành phần điều khiển biểu mẫu đều có một nhãn rõ ràng, với một id riêng biệt cho mỗi thành phần. Để đảm bảo chúng ta không vô tình tạo mã nhận dạng trùng lặp, giá trị mã nhận dạng là tổ hợp của số câu hỏi và giá trị.
Khi thêm nút chọn, vì nhãn mô tả giá trị của nút chọn, nên chúng ta sẽ bao gồm tất cả các nút có cùng tên trong <fieldset>, trong đó <legend> là nhãn hoặc câu hỏi cho toàn bộ tập hợp.
Các trường hợp sử dụng khác về hỗ trợ tiếp cận
Việc sử dụng id trong khả năng hỗ trợ tiếp cận và khả năng hữu dụng không chỉ giới hạn ở nhãn. Trong phần giới thiệu về văn bản, <section> đã được chuyển đổi thành điểm tham chiếu khu vực bằng cách tham chiếu id của <h2> làm giá trị của aria-labelledby của <section> để cung cấp tên có thể truy cập:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Có hơn 50 trạng thái và thuộc tính aria-* có thể dùng để đảm bảo khả năng hỗ trợ tiếp cận. aria-labelledby, aria-describedby,
aria-details và aria-owns lấy giá trị là danh sách tham chiếu id được phân tách bằng dấu cách. aria-activedescendant xác định phần tử con cháu hiện đang được lấy tiêu điểm, lấy giá trị là một tham chiếu id duy nhất: tham chiếu của phần tử duy nhất có tiêu điểm (chỉ có thể lấy tiêu điểm một phần tử tại một thời điểm).
class
Thuộc tính class cung cấp thêm một cách nhắm mục tiêu các phần tử bằng CSS (và JavaScript), nhưng không phục vụ mục đích nào khác trong HTML (mặc dù các khung và thư viện thành phần có thể sử dụng các thuộc tính này). Thuộc tính lớp có giá trị là danh sách phân tách bằng dấu cách của các lớp phân biệt chữ hoa chữ thường cho phần tử.
Việc xây dựng một cấu trúc ngữ nghĩa hợp lý cho phép nhắm mục tiêu các phần tử dựa trên vị trí và chức năng của các phần tử đó. Cấu trúc âm thanh cho phép sử dụng bộ chọn phần tử con, bộ chọn quan hệ và bộ chọn thuộc tính. Khi bạn tìm hiểu về các thuộc tính trong phần này, hãy cân nhắc cách tạo kiểu cho các phần tử có cùng thuộc tính hoặc giá trị thuộc tính. Không phải là bạn không nên sử dụng thuộc tính lớp, mà chỉ là hầu hết các nhà phát triển không nhận ra rằng họ thường không cần sử dụng thuộc tính này.
Cho đến nay, MLW chưa sử dụng lớp nào. Có thể chạy một trang web mà không có tên lớp không? Chúng ta sẽ xem xét.
style
Thuộc tính style cho phép áp dụng kiểu cùng dòng, tức là kiểu được áp dụng cho một phần tử duy nhất mà thuộc tính được đặt.
Thuộc tính style lấy các cặp giá trị thuộc tính CSS làm giá trị, với cú pháp của giá trị giống với nội dung của khối kiểu CSS: các thuộc tính theo sau là dấu hai chấm, giống như trong CSS, và dấu chấm phẩy kết thúc mỗi phần khai báo, nằm sau giá trị.
Các kiểu chỉ được áp dụng cho phần tử mà thuộc tính được đặt, với các phần tử con kế thừa các giá trị thuộc tính kế thừa nếu không bị ghi đè bởi các phần khai báo kiểu khác trên các phần tử lồng nhau hoặc trong các khối <style> hoặc trang kiểu. Vì giá trị này bao gồm nội dung tương đương của một khối kiểu duy nhất chỉ áp dụng cho phần tử đó, nên bạn không thể sử dụng giá trị này cho nội dung được tạo, để tạo ảnh động khung hình chính hoặc để áp dụng bất kỳ quy tắc at nào khác.
Mặc dù style thực sự là một thuộc tính toàn cục, nhưng bạn không nên sử dụng thuộc tính này. Thay vào đó, hãy xác định kiểu trong một hoặc nhiều tệp riêng biệt.
Tuy nhiên, thuộc tính style có thể hữu ích trong quá trình phát triển để tạo kiểu nhanh, chẳng hạn như cho mục đích kiểm thử. Sau đó, hãy lấy kiểu "solution" (giải pháp) và dán vào tệp CSS đã liên kết.
tabindex
Bạn có thể thêm thuộc tính tabindex vào bất kỳ phần tử nào để cho phép phần tử đó nhận tiêu điểm. Giá trị tabindex xác định xem giá trị đó có được thêm vào thứ tự thẻ hay không và có thể thêm vào thứ tự thẻ không phải mặc định hay không.
Thuộc tính tabindex có giá trị là một số nguyên. Giá trị âm (theo quy ước là sử dụng -1) giúp một phần tử có thể nhận tiêu điểm, chẳng hạn như thông qua JavaScript, nhưng không thêm phần tử đó vào trình tự nhấn phím tab. Giá trị tabindex của 0 giúp phần tử có thể lấy tiêu điểm và truy cập được thông qua thao tác nhấn phím tab, thêm phần tử đó vào thứ tự thẻ mặc định của trang theo thứ tự mã nguồn. Giá trị 1 trở lên sẽ đặt phần tử vào một trình tự tiêu điểm được ưu tiên và bạn không nên sử dụng giá trị này.
Trên trang này, có một chức năng chia sẻ sử dụng phần tử tuỳ chỉnh <share-action> đóng vai trò là <button>. tabindex bằng 0 được thêm vào để thêm phần tử tuỳ chỉnh vào thứ tự đánh dấu bằng phím mặc định của bàn phím:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
role của button cho người dùng trình đọc màn hình biết rằng phần tử này sẽ hoạt động như một nút. JavaScript được dùng để đảm bảo giữ lời hứa về chức năng của nút; bao gồm cả việc xử lý cả sự kiện nhấp và nhấn phím cũng như xử lý các thao tác nhấn phím Enter và Space.
Các thành phần điều khiển biểu mẫu, đường liên kết, nút và nội dung có thể chỉnh sửa có thể nhận tâm điểm; khi người dùng nhấn phím tab trên bàn phím, tâm điểm sẽ di chuyển đến phần tử có thể lấy làm tâm điểm tiếp theo như thể họ đã đặt tabindex="0". Theo mặc định, các phần tử khác không thể lấy tiêu điểm. Việc thêm thuộc tính tabindex vào các phần tử đó cho phép chúng nhận được tiêu điểm khi không nhận được.
Nếu một tài liệu bao gồm các phần tử có tabindex từ 1 trở lên, thì các phần tử đó sẽ được đưa vào một trình tự thẻ riêng. Như bạn sẽ thấy trong codepen, việc nhấn phím tab bắt đầu theo một trình tự riêng biệt, theo thứ tự giá trị thấp nhất đến giá trị cao nhất, trước khi chuyển sang các giá trị đó theo trình tự thông thường theo thứ tự nguồn.
Việc thay đổi thứ tự nhấn phím có thể tạo ra trải nghiệm người dùng thực sự tệ. Điều này khiến bạn khó có thể dựa vào công nghệ hỗ trợ (cả bàn phím và trình đọc màn hình) để điều hướng nội dung. Nhà phát triển cũng khó quản lý và duy trì. Tâm điểm rất quan trọng; có một mô-đun toàn bộ thảo luận về tâm điểm và thứ tự tâm điểm.
role
Thuộc tính role là một phần của quy cách ARIA, thay vì quy cách HTML WHATWG. Bạn có thể sử dụng thuộc tính role để cung cấp ý nghĩa ngữ nghĩa cho nội dung, cho phép trình đọc màn hình thông báo cho người dùng trang web về hoạt động tương tác dự kiến của người dùng với một đối tượng.
Có một số tiện ích giao diện người dùng phổ biến, chẳng hạn như combobox, thanh trình đơn, danh sách thẻ và treegrid, không có nội dung tương đương HTML gốc.
Ví dụ: khi tạo mẫu thiết kế có thẻ, bạn có thể sử dụng các vai trò tab, tablist và tabpanel. Những người có thể nhìn thấy giao diện người dùng đã học được kinh nghiệm về cách điều hướng tiện ích và hiển thị các bảng điều khiển khác nhau bằng cách nhấp vào các thẻ liên kết.
Việc đưa vai trò tab vào <button role="tab"> khi một nhóm nút được dùng để hiển thị các bảng điều khiển khác nhau cho phép người dùng trình đọc màn hình biết rằng <button> hiện có tiêu điểm có thể bật/tắt một bảng điều khiển có liên quan vào chế độ xem thay vì triển khai chức năng giống như nút thông thường.
Thuộc tính role không thay đổi hành vi của trình duyệt hoặc thay đổi hoạt động tương tác của bàn phím hoặc thiết bị con trỏ – việc thêm role="button" vào <span> sẽ không biến thuộc tính này thành <button>. Đó là lý do bạn nên sử dụng các phần tử HTML có ngữ nghĩa cho mục đích dự kiến. Tuy nhiên, khi không thể sử dụng phần tử phù hợp, thuộc tính role sẽ cho phép thông báo cho người dùng trình đọc màn hình khi một phần tử không ngữ nghĩa được cải tiến thành vai trò của một phần tử ngữ nghĩa.
contenteditable
Một phần tử có thuộc tính contenteditable được đặt thành true có thể chỉnh sửa, có thể lấy tiêu điểm và được thêm vào thứ tự thẻ như thể đã đặt tabindex="0". Contenteditable là một thuộc tính được liệt kê hỗ trợ các giá trị true và false, với giá trị mặc định là inherit nếu thuộc tính này không có hoặc có giá trị không hợp lệ.
Ba thẻ mở này tương đương nhau:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Nếu bạn thêm <style contenteditable="false">, thì phần tử này sẽ không chỉnh sửa được (trừ khi phần tử này có thể chỉnh sửa theo mặc định, chẳng hạn như <textarea>). Nếu giá trị không hợp lệ, chẳng hạn như <style contenteditable="😀"> hoặc <style contenteditable="contenteditable">, thì giá trị mặc định sẽ là inherit.
Để bật/tắt giữa các trạng thái, hãy truy vấn giá trị của thuộc tính chỉ có thể đọc HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Ngoài ra, bạn có thể chỉ định thuộc tính này bằng cách đặt editor.contentEditable thành true, false hoặc inherit.
Bạn có thể áp dụng thuộc tính chung cho tất cả phần tử, ngay cả phần tử <style>. Bạn có thể sử dụng các thuộc tính và một chút CSS để tạo trình chỉnh sửa CSS trực tiếp.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Hãy thử thay đổi color của style thành một giá trị khác inherit. Sau đó, hãy thử thay đổi style thành bộ chọn p.
Đừng xoá thuộc tính hiển thị, nếu không, khối kiểu sẽ biến mất.
Thuộc tính tùy chỉnh
Chúng ta mới chỉ tìm hiểu sơ bộ về các thuộc tính chung của HTML. Thậm chí còn có nhiều thuộc tính chỉ áp dụng cho một hoặc một nhóm phần tử hạn chế. Ngay cả khi đã xác định hàng trăm thuộc tính, bạn vẫn có thể cần một thuộc tính không có trong quy cách. HTML sẽ giúp bạn giải quyết vấn đề này.
Bạn có thể tạo bất kỳ thuộc tính tuỳ chỉnh nào mình muốn bằng cách thêm tiền tố data-. Bạn có thể đặt tên cho thuộc tính của mình bất kỳ tên nào bắt đầu bằng data-, theo sau là bất kỳ chuỗi ký tự viết thường nào không bắt đầu bằng xml và không chứa dấu hai chấm (:).
Mặc dù HTML rất dễ tính và sẽ không bị lỗi nếu bạn tạo các thuộc tính không được hỗ trợ không bắt đầu bằng data, hoặc ngay cả khi bạn bắt đầu thuộc tính tuỳ chỉnh bằng xml hoặc bao gồm :, nhưng việc tạo các thuộc tính tuỳ chỉnh hợp lệ bắt đầu bằng data- sẽ mang lại nhiều lợi ích.
Với các thuộc tính dữ liệu tuỳ chỉnh, bạn biết rằng mình không vô tình sử dụng tên thuộc tính hiện có. Thuộc tính dữ liệu tuỳ chỉnh phù hợp với tương lai.
Mặc dù trình duyệt sẽ không triển khai hành vi mặc định cho bất kỳ thuộc tính có tiền tố data- cụ thể nào, nhưng có một API tập dữ liệu tích hợp sẵn để lặp lại các thuộc tính tuỳ chỉnh của bạn. Thuộc tính tuỳ chỉnh là một cách tuyệt vời để truyền đạt thông tin dành riêng cho ứng dụng thông qua JavaScript. Thêm các thuộc tính tuỳ chỉnh vào các phần tử ở dạng data-name và truy cập vào các thuộc tính này thông qua DOM bằng cách sử dụng dataset[name] trên phần tử có liên quan.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Bạn có thể sử dụng getAttribute() bằng tên thuộc tính đầy đủ hoặc tận dụng thuộc tính dataset đơn giản hơn.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
Thuộc tính dataset trả về một đối tượng DOMStringMap của các thuộc tính data- của mỗi phần tử. Có một số thuộc tính tuỳ chỉnh trên <blockquote>. Thuộc tính tập dữ liệu có nghĩa là bạn không cần biết những thuộc tính tuỳ chỉnh đó là gì để truy cập vào tên và giá trị của các thuộc tính đó:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Các thuộc tính trong bài viết này là thuộc tính chung, nghĩa là bạn có thể áp dụng các thuộc tính này cho bất kỳ phần tử HTML nào (mặc dù không phải tất cả các thuộc tính đều có tác động đến các phần tử đó). Tiếp theo, chúng ta sẽ xem xét hai thuộc tính trong hình ảnh giới thiệu mà chúng ta chưa đề cập đến – target và href – cũng như một số thuộc tính khác dành riêng cho phần tử khi tìm hiểu sâu hơn về đường liên kết.
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về thuộc tính.
id phải là duy nhất trong tài liệu.
Chọn thuộc tính tuỳ chỉnh được tạo đúng cách.
data-birthdaybirthdaydata:birthday