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 kỹ hơn về các thuộc tính.
Thuộc tính là yếu tố làm cho HTML trở nên mạnh mẽ. Thuộc tính là 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ề cũng như chức năng của 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 mang tính chung, nghĩa là các thuộc tính này 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à các phần tử cụ thể và chỉ liên quan đến một phần tử. Trong HTML, tất cả các thuộc tính ngoại trừ boolean và ở một mức độ nào đó các thuộc tính được liệt kê, đều bắt buộc phải có giá trị.
Nếu một giá trị thuộc tính chứa một 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, để cải thiện mức độ dễ đọ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 vẫn phân biệt chữ hoa chữ thường. Các giá trị là một phần của thông số kỹ thuật 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à mã nhận dạng) có phân biệt chữ hoa chữ thường. Nếu một giá trị thuộc tính có phân biệt chữ hoa chữ thường trong HTML thì giá trị đó cũng có 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 thì khô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 này 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 này thì phần tử bị vô hiệu hoá, bắt buộc, chỉ đọc, v.v. Nếu không có thì phần tử không phải là không có.
Bạn có thể bỏ qua hoặc đặt giá trị Boolean thành một chuỗi trống hoặc là tên của thuộc tính; nhưng thực ra giá trị này không nhất thiết phải được đặt thành chuỗi true. Tất cả các giá trị, kể 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 sai, hãy bỏ qua thuộc tính này. Nếu thuộc tính này là true, hãy thêm thuộc tính này nhưng không cung cấp giá trị.
Ví dụ: required="required" không phải là một giá trị hợp lệ trong HTML; nhưng vì required là boolean, các giá trị không hợp lệ sẽ phân giải thành true.
Tuy nhiên, vì các thuộc tính được liệt kê không hợp lệ không nhất thiết phải phân giải cùng một giá trị với giá trị bị thiếu, nên bạn sẽ dễ dàng bỏ qua giá trị hơn so với việc nhớ thuộc tính nào là boolean so với được 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á 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");
Hãy lưu ý rằng trong các ngôn ngữ XML, như SVG, tất cả thuộc tính đều phải có một giá trị, bao gồm cả các thuộc tính boolean.
Thuộc tính được liệt kê
Các thuộc tính được liệt kê đôi khi 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 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, thuộc tính này có giá trị mặc định nếu có thuộc tính nhưng thiếu giá trị. Ví dụ: nếu bạn đưa <style contenteditable> vào, 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 này không có nghĩa là giá trị đó là sai; một thuộc tính hiện tại thiếu giá trị 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 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 phụ thuộc vào thuộc tính. Không giống như giá trị boolean, thuộc tính không tự động có giá trị là "true" nếu có. Nếu thêm <style contenteditable="false">, bạn sẽ không thể chỉnh sửa phần tử này. 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 trường hợp với các thuộc tính liệt kê, các 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, hiện diện nhưng không có giá trị hoặc có giá trị không hợp lệ, thì thuộc tính đó sẽ mặc định là text. Mặc dù hành vi này phổ biến, nhưng không phải là một quy tắc.
Do đó, bạn phải biết thuộc tính nào là boolean so với được liệt kê; bỏ qua các giá trị nếu có thể để tránh nhầm lẫn cũng như tra cứu giá trị nếu cần.
Thuộc tính toàn cục
Thuộc tính chung là các thuộc tính có thể đặ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. Về lý thuyết, mặc dù tất cả những thành phần này có thể được thêm vào bất kỳ phần tử HTML nào, nhưng một số thuộc tính chung không có hiệu lực khi đặt trên một số phần tử; chẳng hạn như việc đặt hidden trên <meta> thì nội dung meta sẽ không hiển thị.
id
Thuộc tính chung id 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 phần tử cho 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ử biểu mẫu.
– Cung cấp nhãn hoặc nội dung mô tả cho công nghệ hỗ trợ.
– Các kiểu nhắm mục tiêu có (độ đặc hiệu cao hoặc làm 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 có dấu cách, tài liệu sẽ không bị hỏng, nhưng bạn 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 phải là ý tưởng hay. Để việc lập trình trở nên dễ dàng hơn ở hiện tại và sau này, hãy đặt ký tự đầu tiên của id thành một chữ cái và chỉ sử dụng chữ cái ASCII, chữ số, _ và -. Bạn nên đưa ra quy ước đặt tên id rồi tuân theo 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ị lỗi nếu bạn sử dụng id nhiều lần, nhưng JavaScript, đường liên kết và các 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 mảnh liên kết
Thanh điều hướng bao gồm 4 đường liên kết. Chúng tôi sẽ đề cập đến phần tử liên kết sau, nhưng hiện tại, hãy lưu ý rằng các đường liên kết không bị hạn chế ở các URL dựa trên HTTP. Chúng có thể là giá trị nhận dạng phân đoạn của 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 học máy, thanh điều hướng trong tiêu đề trang bao gồm 4 đường liên kết:
Thuộc tính href cung cấp siêu liên kết kích hoạt đường liên kết chuyển người dùng đến. Khi một URL chứa dấu băm (#), theo sau là một chuỗi ký tự, thì chuỗi đó là giá trị nhận dạng phân đoạn. Nếu chuỗi đó khớp với id của một phần tử trên trang web, thì mảnh đó là một liên kết hoặc dấu trang với 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 bốn phần 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 4 đường liên kết bất kỳ trong thanh điều hướng, phần tử liên kết với 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 khung hiển thị.
Nội dung <main> của hội thảo học máy có 4 phần có 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 khung hiển thị. Mã đánh dấu này 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ị nhận dạng khớp với id của <section> trong <main>.
Trình duyệt cung cấp cho chúng tôi 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 đơn giản là href="#", sẽ cuộn người dùng lên đầu trang.
Dấu phân tách dấu băm trong href không phải là một phần của giá trị nhận dạng mảnh. Giá trị nhận dạng phân 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 mục tiêu từng phần bằng cách sử dụng bộ chọn mã, chẳng hạn như #feedback hoặc, nếu có đặc điểm thấp hơn, thì bộ chọn thuộc tính, [id="feedback"] có phân biệt chữ hoa chữ thường.
Lên nội dung
Trên trang web MLW.com, có một mục điều thú vị ẩn giấu dành riêng cho người dùng chuột. Nhấp vào công tắc đèn sẽ bật và tắt trang.
Mã đánh dấu cho hình ảnh công tắc đèn là: html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" /> Bạn có thể dùng thuộc tính id làm tham số cho phương thức getElementById() và với tiền tố #, tham số cho phương thức querySelector() và querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Hàm JavaScript của chúng tôi 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 các phần tử đó:
<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ử HTML <label> có thuộc tính for nhận giá trị id của đối tượng kiểm soát biểu mẫu liên kết với thuộc tính này.
Việc tạo một nhãn rõ ràng bằng cách đưa id vào mọi tuỳ chọn điều khiển biểu mẫu và ghép nối từng tuỳ chọn điều khiển biểu mẫu với thuộc tính for của nhãn đó để đảm bảo rằng mọi chế độ kiểm soát biểu mẫu đều có một nhãn liên kết.
Mặc dù mỗi nhãn có thể liên kết với chính xác một chế độ kiểm soát biểu mẫu, nhưng một chế độ kiểm soát biểu mẫu có thể có nhiều nhãn liên kết.
Nếu chế độ điều khiển biểu mẫu được lồng giữa các thẻ mở và đó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 giúp tất cả người dùng biết mục đích sử dụng của mỗi chế độ kiểm soát 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 cung cấp thông tin cho người dùng công nghệ hỗ trợ. Ngoài ra, thao tác nhấp vào vị trí bất kỳ trên nhãn sẽ đưa tâm điểm vào thành phần liên kết, mở rộng vùng nhấp của chế độ điều khiển. Điều này không chỉ hữu ích đối với những người gặp vấn đề về độ khéo léo khiến việc di chuyển 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 giả mạo thứ năm của một bài kiểm tra giả mạo là một câu hỏi trắc nghiệm có chọn lọc. Mỗi chế độ điều khiển biểu mẫu đều có một nhãn rõ ràng, với một id duy nhất cho mỗi chế độ cài đặt. Để đảm bảo chúng tôi không vô tình sao ché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ị mã nhận dạng.
Khi đưa các nút chọn vào, vì nhãn mô tả giá trị của các nút chọn, nên chúng ta sẽ đưa mọi nút có tên giống nhau vào <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 chức năng hỗ trợ tiếp cận khác
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 mốc khu vực bằng cách tham chiếu id của <h2> làm giá trị aria-labelledby của <section> để cung cấp tên thành phần hỗ trợ tiếp cận:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Bạn có thể dùng hơn 50 trạng thái và thuộc tính aria-* để đả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à một 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 hiện được lấy làm tâm điểm, lấy giá trị làm tham chiếu id duy nhất: giá trị của một phần tử có tâm điểm (chỉ có thể lấy một phần tử tại mỗi 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 chúng). Thuộc tính lớp này lấy giá trị trong một danh sách được phân tách bằng dấu cách gồm các lớp (phân tách chữ hoa chữ thường) cho phần tử.
Việc xây dựng 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 chúng. Cấu trúc âm thanh cho phép sử dụng các 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, 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 làm vậy.
Hiện tại, MLW chưa sử dụng lớp nào. Có thể khởi chạy một trang web mà không cần một tên lớp duy nhất 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, là kiểu được áp dụng cho phần tử duy nhất mà thuộc tính được đặt trên đó.
Thuộc tính style nhận các cặp giá trị thuộc tính CSS với cú pháp của giá trị giống với nội dung của khối kiểu CSS: theo sau thuộc tính là dấu hai chấm, giống như trong CSS và dấu chấm phẩy kết thúc mỗi nội dung khai báo, đứng sau giá trị.
Kiểu chỉ được áp dụng cho phần tử mà thuộc tính được đặt trên đó, các phần tử con sẽ kế thừa giá trị thuộc tính 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 khối <style> hay biểu định kiểu. Vì giá trị này bao gồm phần nội dung tương đương với nội dung của một khối kiểu chỉ được á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 trong khung hình chính hoặc áp dụng bất kỳ quy tắc tại chỗ 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 tệp hoặc các 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, chẳng hạn như cho mục đích kiểm thử. Sau đó, hãy áp dụng kiểu "giải pháp" rồi 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 tâm điểm. Giá trị tabindex xác định xem mục đó có được thêm vào thứ tự thẻ hay không, và (không bắt buộc) có được thêm vào thứ tự thẻ không mặc định hay không.
Thuộc tính tabindex lấy giá trị là một số nguyên. Giá trị âm (quy ước là sử dụng -1) làm cho một phần tử có thể nhận tâm điểm, chẳng hạn như qua JavaScript, nhưng không thêm phần tử đó vào trình tự thẻ. 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 phạm vi thẻ, thêm phần tử này vào thứ tự thẻ mặc định của trang theo thứ tự mã nguồn. Giá trị từ 1 trở lên sẽ đặt phần tử theo trình tự lấy nét được ưu tiên và bạn không nên 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>. Bạn có thể sử dụng tabindex bằng 0 để thêm phần tử tuỳ chỉnh vào thứ tự thẻ mặc định trên 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 giữ đúng 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à phím tắt 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à các 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 thẻ, tiêu điểm sẽ di chuyển sang phần tử có thể lấy tiêu điểm tiếp theo như thể chúng đã đặt tabindex="0". Theo mặc định, các phần tử khác không thể làm tâm điểm. Việc thêm thuộc tính tabindex vào các phần tử đó cho phép các phần tử đó nhận tiêu điểm nếu không được như vậy.
Nếu một tài liệu chứa các phần tử có tabindex từ 1 trở lên, thì các phần tử này sẽ được đưa vào một trình tự thẻ riêng biệt. Như bạn sẽ thấy trong mã nguồn, quá trình gắn thẻ bắt đầu theo một trình tự riêng, theo thứ tự từ giá trị thấp nhất đến giá trị cao nhất, trước khi đi qua các giá trị đó trong trình tự thông thường theo thứ tự nguồn.
Việc thay đổi thứ tự thẻ có thể tạo ra trải nghiệm người dùng thực sự kém. Điều này gây khó khăn cho việc dựa vào công nghệ hỗ trợ như bàn phím và trình đọc màn hình để điều hướng nội dung của bạn. Điều này cũng gây khó khăn cho nhà phát triển trong việc quản lý và duy trì. Trọng tâm rất quan trọng; có toàn bộ học phần thảo luận về thứ tự tiêu điểm.
role
Thuộc tính role là một phần của thông số kỹ thuật ARIA, chứ không phải thông số kỹ thuật whatWG HMTL. Thuộc tính role có thể được dùng để 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 vài tiện ích giao diện người dùng phổ biến như hộp kết hợp, thanh trình đơn, danh sách thẻ và lưới cây không có HTML gốc tương đương.
Ví dụ: khi tạo mẫu thiết kế dạng 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 qua 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ẻ được liên kết.
Việc thêm vai trò tab với <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, giúp người dùng trình đọc màn hình biết rằng <button> hiện đang được lấy làm tâm điểm có thể chuyển một bảng điều khiển liên quan thành khung hiển thị thay vì triển khai chức năng giống 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 với bàn phím hoặc 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>. Đây là lý do tại sao bạn nên sử dụng các phần tử HTML ngữ nghĩa cho mục đích dự định của chúng. Tuy nhiên, khi không thể sử dụng đúng phần tử, thuộc tính role sẽ thông báo cho người dùng trình đọc màn hình khi một phần tử không phải ngữ nghĩa đã được bổ sung vào vai trò của 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, lấy tiêu điểm và được thêm vào thứ tự thẻ như thể bạn đặt tabindex="0". Contenteditable là một thuộc tính liệt kê hỗ trợ các giá trị true và false, với giá trị mặc định là inherit nếu không có thuộc tính này 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 thêm <style contenteditable="false">, bạn sẽ không thể chỉnh sửa phần tử này (trừ phi phần tử đó có thể chỉnh sửa theo mặc định, 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ị sẽ được đặt mặc định 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 mọi phần tử, thậm chí cả phần tử <style>. Bạn có thể sử dụng các thuộc tính và một phần 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 một giá trị không phải là inherit. Sau đó, hãy thử thay đổi style thành bộ chọn p.
Khô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 tôi chỉ mới đề cập đến các thuộc tính toàn cục của HTML. Thậm chí có nhiều thuộc tính chỉ áp dụng cho một hoặc một tập hợp phần tử giới hạn. Ngay cả khi có hàng trăm thuộc tính đã xác định, bạn vẫn có thể cần một thuộc tính không có trong thông số kỹ thuật. Bạn có thể sử dụng HTML.
Bạn có thể tạo bất kỳ thuộc tính tuỳ chỉnh nào mà bạn muốn bằng cách thêm tiền tố data-. Bạn có thể đặt tên cho thuộc tính bất kỳ 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ể tha thứ và sẽ không gặp lỗi nếu bạn tạo các thuộc tính không được hỗ trợ và 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 :, thì việc tạo các thuộc tính tuỳ chỉnh hợp lệ bắt đầu bằng data- sẽ có nhiều lợi ích.
Với 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ó. Các thuộc tính dữ liệu tuỳ chỉnh phù hợp với tương lai.
Mặc dù các 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 bạn vẫn có một API tập dữ liệu tích hợp sẵn để lặp lại thông qua các thuộc tính tuỳ chỉnh. Các thuộc tính tuỳ chỉnh là một cách rất hiệu quả để truyền đạt thông tin dành riêng cho ứng dụng thông qua JavaScript. Thêm 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 phần tử này thông qua DOM bằng cách sử dụng dataset[name] trên phần tử được đề cập.
<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 cách dùng tên thuộc tính đầy đủ hoặc 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 thuộc 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 các thuộc tính tuỳ chỉnh đó là gì để có thể 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à các thuộc tính chung, nghĩa là có thể áp dụng cho bất kỳ phần tử HTML nào (mặc dù tất cả các thuộc tính đó không ảnh hưởng đến các phần tử đó). Tiếp theo, chúng ta sẽ xem xét hai thuộc tính trong ảnh giới thiệu mà chúng tôi chưa đề cập đến (target và href) cùng một số thuộc tính khác của riêng từng phần tử khi tìm hiểu kỹ hơn về đườ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ó định dạng chính xác.
data-birthdaybirthdaydata:birthday