Các thuộc tính đã được thảo luận ngắn gọn trong phần Tổng quan về HTML; đã đến 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 và cặp tên/giá trị được phân tách bằng dấu cách xuất hiện trong thẻ mở, cung cấp thông tin về 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, tức là chúng có thể xuất hiện trong thẻ mở của bất kỳ phần tử nào. Các 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 các 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ừ thuộc tính boolean và ở một mức độ nào đó là thuộc tính được liệt kê) đều yêu cầu một giá trị.
Nếu giá trị thuộc tính có dấu cách hoặc ký tự đặc biệt, thì bạn phải đặt giá trị đó trong dấu ngoặc kép. Vì lý do này và để cải thiện khả năng đọc, bạn nên luô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 thì có. 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à giá trị nhận dạng, có phân biệt chữ hoa chữ thường. Nếu 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 làm một phần của bộ chọn thuộc tính trong CSS và trong 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ó một 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, thì phần tử sẽ bị vô hiệu hoá, bắt buộc, chỉ đọc, v.v. Nếu không có, thì phần tử sẽ không bị vô hiệu hoá, bắt buộc, chỉ đọc, v.v.
Bạn có thể bỏ qua giá trị boolean, đặt thành một chuỗi trống hoặc là tên của thuộc tính; nhưng bạn không cần phải đặt giá trị thành chuỗi true. Tất cả các giá trị, kể cả true, false và 😀, dù không hợp lệ, vẫn sẽ 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ày. Nếu thuộc tính là true, hãy thêm thuộc tính nhưng đừ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.
Nhưng 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ị như các giá trị bị thiếu, nên bạn sẽ dễ dàng có thói quen bỏ qua các giá trị hơn là nhớ những thuộc tính nào là boolean so với được liệt kê và có thể cung cấp một giá trị không hợp lệ.
Khi chuyển đổi giữa true và false, hãy thêm và xoá hoàn toàn thuộc tính 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ó một giá trị, kể cả các thuộc tính boolean.
Thuộc tính được liệt kê
Đôi khi, bạn nhầm lẫn các thuộc tính được liệt kê 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 giới hạn các giá trị hợp lệ được xác định trước.
Giống như các thuộc tính boolean, chúng có giá trị mặc định nếu thuộc tính xuất hiện 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 có giá trị bị thiếu không nhất thiết là đúng; và giá trị mặc định cho các giá trị không hợp lệ không nhất thiết giống với một chuỗi rỗng. Tiếp tục với 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 là "true" nếu có. Nếu bạn thêm <style contenteditable="false">, thì 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ị đó 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à giá trị không hợp lệ là như 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 so với thuộc tính được liệt kê; hãy bỏ qua các giá trị nếu có thể để bạn không bị nhầm lẫn và tra cứu giá trị khi cần.
Thuộc tính chung
Thuộc tính chung là những thuộc tính có thể được đặt trên mọi phần tử HTML, 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ụ: việc đặt hidden trên <meta> dưới dạng nội dung meta sẽ không hiển thị.
id
Thuộc tính chung id được dùng để xác định giá trị nhận dạng duy nhất cho một phần tử. Thẻ 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 đoạn liên kết.
- Xác định một phần tử để tạo tập lệnh.
- Liên kết mộ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ợ.
- Nhắm đến các kiểu có (độ đặc hiệu 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 tên có 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 đế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. Để giúp bạn lập trình dễ dàng hơn ở hiện tại và tương lai, 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à - theo bộ mã ASCII. Bạn nên nghĩ ra một 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 đối với tài liệu. Bố cục trang của bạn có thể sẽ không bị hỏng nếu id được dùng nhiều lần, nhưng JavaScript, đường liên kết và lượt tương tác với phần tử có thể không hoạt động như mong đợi.
Giá trị nhận dạng phân đoạn đường liên kết
Thanh điều hướng có 4 đường liên kết. Chúng ta sẽ đề cập đến phần tử liên kết sau, nhưng hiện tại, hãy nhận ra rằng các đường liên kết không bị giới hạn ở URL dựa trên HTTP; chúng có thể là giá trị nhận dạng đoạn đế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 hội thảo về học máy, 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 liên kết sẽ chuyển người dùng đến. Khi một URL có dấu băm (#) theo sau là một chuỗi ký tự, chuỗi đó là mã nhận dạng đoạn. Nếu chuỗi đó khớp với một id của một phần tử trong trang web, thì đoạn mã là một điểm neo hoặc dấu trang cho phần tử đó. Trình duyệt sẽ cuộn đến điểm mà neo được xác định.
Bốn đường liên kết này trỏ đến 4 mục trên trang của chúng tôi, đượ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ố 4 đường liên kết trên thanh điều hướng, phần tử được liên kết bằng mã nhận dạng phân đoạn, phần tử chứa mã nhận dạng khớp trừ # sẽ cuộn vào khung hiển thị.
Nội dung <main> của hội thảo về học máy có 4 phần với các mã nhận dạng. Khi khách truy cập vào 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 đoạn đó sẽ cuộn vào khung hiển thị. Mã đánh dấu tương tự như sau:
<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 đoạn trong các đường liên kết <nav>, bạn sẽ nhận thấy rằng mỗi giá trị nhận dạng đoạn đều khớp với id của một <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ỉ cần đặt href="#" sẽ giúp người dùng cuộn 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 theo đoạn. Mã nhận dạng theo đoạn 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 mục bằng bộ chọn mã nhận dạng, chẳng hạn như #feedback hoặc, để có độ đặc hiệu thấp hơn, hãy dùng bộ chọn thuộc tính phân biệt chữ hoa chữ thường, [id="feedback"].
Lên nội dung
Trên MLW.com, chỉ người dùng chuột mới thấy được một nội dung bất ngờ. Khi bạn nhấp vào công tắc đèn, trang sẽ bật và tắt.
Dưới đây là mã đánh dấu cho hình ảnh công tắc đèn: html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" /> Thuộc tính id có thể dùng 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 các 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 tôi sử dụng khả năng này để nhắm đến các phần tử theo thuộc tính id:
<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ó một thuộc tính for lấy id của chế độ điều khiển biểu mẫu mà phần tử đó được liên kết làm giá trị.
Việc tạo một nhãn rõ ràng bằng cách thêm một id vào mọi chế độ kiểm soát biểu mẫu và ghép nối từng chế độ với thuộc tính for của nhãn sẽ đảm bảo rằng mọi chế độ kiểm soát biểu mẫu đều có một nhãn được liên kết.
Mặc dù mỗi nhãn chỉ có thể liên kết với 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 chế độ kiểm soát biểu mẫu được lồng giữa thẻ mở và thẻ đóng <label>, thì các thuộc tính for và id không bắt buộc: đây được gọi là nhãn "ngầm". Nhãn giú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 giúp người dùng công nghệ hỗ trợ có thể truy cập vào thông tin. Ngoài ra, khi nhấp vào một nhãn bất kỳ, tiêu điểm sẽ chuyển đến phần tử được liên kết, mở rộng vùng nhấp của thành phần. Tính năng 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 dùng chuột trở nên 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ả của một bài kiểm tra giả là câu hỏi trắc nghiệm chỉ chọn một đáp án. Mỗi chế độ kiểm soát biểu mẫu đều có một nhãn rõ ràng, với một id riêng cho từng chế độ. Để đảm bảo chúng ta không vô tình trùng lặp mã nhận dạng, giá trị mã nhận dạng là sự kết hợp giữa số câu hỏi và giá trị.
Khi thêm các nút chọn, vì nhãn mô tả giá trị của các nút chọn, nên chúng tôi sẽ bao gồm tất cả các nút có cùng tên trong một <fieldset> với <legend> là nhãn hoặc câu hỏi cho toàn bộ nhóm.
Các trường hợp sử dụng khác liên quan đến 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 giới thiệu về văn bản, <section> đã được chuyển đổi thành điểm đánh dấ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-* mà bạn 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 danh sách tham chiếu id được phân tách bằng dấu cách làm giá trị. aria-activedescendant (xác định phần tử con hiện đượ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 lấy tiêu điểm (chỉ một phần tử có thể được lấy tiêu điểm tại một thời điểm).
class
Thuộc tính class cung cấp một cách khác để nhắm đến các phần tử bằng CSS (và JavaScript), nhưng không có 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 chúng). Thuộc tính class lấy giá trị là danh sách phân tách bằng dấu cách gồm 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 đến các phần tử dựa trên vị trí và chức năng của chúng. 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 class, mà chỉ là hầu hết 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 bất kỳ lớp nào. Một trang web có thể được ra mắt mà không có tên lớp đơn không? Chúng ta hãy chờ xem.
style
Thuộc tính style cho phép áp dụng các kiểu nội tuyến. Đây là những kiểu được áp dụng cho một phần tử duy nhất mà bạn đặt thuộc tính.
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 như nội dung của một 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 khai báo, xuất hiện 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 được kế thừa nếu không bị ghi đè bởi các 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 biểu định 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ỉ được áp dụng cho phần tử đó, nên bạn không thể dùng giá trị này cho nội dung được tạo, để tạo ảnh động khoá khung hình hoặc để áp dụng bất kỳ quy tắc @ nào khác.
Mặc dù style thực sự là một thuộc tính chung, 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 các 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 để cho phép tạo kiểu nhanh, chẳng hạn như cho mục đích kiểm thử. Sau đó, hãy lấy kiểu "giải pháp" và dán vào tệp CSS được 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 tâm điểm. Giá trị tabindex xác định xem giá trị này có được thêm vào thứ tự thẻ hay không và có thể thêm vào thứ tự nhấn phím Tab không mặc định.
Thuộc tính tabindex lấy một số nguyên làm giá trị. Giá trị âm (theo quy ước là 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 là 0 giúp người dùng có thể lấy tiêu điểm và truy cập vào phần tử thông qua thao tác nhấn phím tab, đồng thời thêm phần tử đó vào thứ tự nhấn phím tab mặc định của trang theo thứ tự mã nguồn. Giá trị từ 1 trở lên sẽ đặt phần tử vào một chuỗi 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 của số 0 được đưa vào để thêm phần tử tuỳ chỉnh vào thứ tự nhấn 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 thông báo cho người dùng trình đọc màn hình rằng phần tử này sẽ hoạt động như một nút. JavaScript được dùng để đảm bảo lời hứa về chức năng của nút được giữ nguyên; bao gồm cả việc xử lý cả sự kiện click và keydown cũng như xử lý các lần nhấn phím Enter và phím cách.
Các nút điều khiển biểu mẫu, đường liên kết, nút và phần tử có thể chỉnh sửa nội dung có thể nhận tiêu điểm; khi người dùng bàn phím nhấn phím tab, tiêu điểm sẽ di chuyển đến phần tử có thể lấy tiêu đ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 những phần tử đó cho phép chúng nhận tiêu điểm khi không nhận được tiêu điểm.
Nếu một tài liệu có 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 chuỗi thẻ riêng. Như bạn sẽ nhận thấy trong codepen, việc nhấn phím Tab bắt đầu trong một chuỗi riêng biệt, theo thứ tự từ giá trị thấp nhất đến giá trị cao nhất, trước khi chuyển qua các giá trị trong chuỗi thông thường theo thứ tự nguồn.
Việc thay đổi thứ tự nhấn phím tab có thể tạo ra trải nghiệm rất tệ cho người dùng. Điều này khiến người dùng khó 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 của bạn. Nhà phát triển cũng khó quản lý và duy trì. Tiêu điểm là một yếu tố quan trọng; có một mô-đun riêng thảo luận về tiêu điểm và thứ tự tiêu điểm.
role
Thuộc tính role là một phần của quy cách ARIA, chứ không phải quy cách HTML của WHATWG. Bạn có thể 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ư hộp kết hợp, thanh trình đơn, danh sách thẻ và lưới cây) không có thành phần HTML tương đương.
Ví dụ: khi tạo một mẫu thiết kế theo thẻ, bạn có thể sử dụng các vai trò tab, tablist và tabpanel. Người có thể nhìn thấy giao diện người dùng đã học được qua kinh nghiệm 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 thêm vai trò tab cùng với <button role="tab"> khi một nhóm nút được dùng để hiện các bảng điều khiển khác nhau sẽ giúp người dùng trình đọc màn hình biết rằng <button> hiện đang có tiêu điểm có thể chuyển đổi một bảng điều khiển có liên quan thành 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 làm thay đổi các hoạt động tương tác của thiết bị bàn phím hoặc con trỏ – việc thêm role="button" vào <span> không biến nó thành <button>. Đây là lý do bạn nên sử dụng các phần tử HTML có ngữ nghĩa đúng mục đích. 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 có ngữ nghĩa đã được trang bị thêm vào vai trò của một phần tử có ngữ nghĩa.
contenteditable
Bạn có thể chỉnh sửa một phần tử có thuộc tính contenteditable được đặt thành true, có thể lấy tiêu điểm và được thêm vào thứ tự nhấn phím tab như thể tabindex="0" đã được đặt. 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 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 thể chỉnh sửa (trừ phi phần tử đó 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.
Để chuyển đổi giữa các trạng thái, hãy truy vấn giá trị của thuộc tính chỉ đọ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 các thuộc tính chung cho tất cả các phần tử, kể 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 một 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 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ơ qua về các thuộc tính chung của HTML. Thậm chí còn có nhiều thuộc tính khác chỉ áp dụng cho một hoặc một số ít phần tử. Ngay cả khi có hàng trăm thuộc tính được xác đị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.
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ằng 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 có thể bỏ qua và sẽ không bị lỗi nếu bạn tạo các thuộc tính không được hỗ trợ mà 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 thê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 các hành vi mặc định cho bất kỳ thuộc tính cụ thể nào có tiền tố data-, nhưng có một API tập dữ liệu tích hợp để 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ưới 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 bạn có thể 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 từng 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 chúng:
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, tức là bạn có thể áp dụng cho mọi phần tử HTML (mặc dù không phải tất cả các thuộc tính đều ảnh hưởng đến những 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 chúng ta tìm hiểu sâu hơn về các đường liên kết.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về các 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.
birthdaydata-birthdaydata:birthday