Và tại sao việc sử dụng các thuộc tính dữ liệu cho cài đặt và kiểu dáng trạng thái JavaScript không phải lúc nào cũng là lựa chọn đúng đắn
Nếu bạn là nhà phát triển web, rất có thể bạn đã nhìn thấy hoặc sử dụng thuộc tính data-target như thế này để kiểm soát tiện ích con trong JavaScript
HTML phương thức của Bootstrap 3 [đơn giản hóa]In the above example, data-target specifies which element is the target to be controlled by the button — targeting the
Tuy nhiên, có một cách tốt hơn nhiều để hoàn thành cùng một mục tiêu
Tại sao thuộc tính data-* tùy chỉnh kém hơn trong ngữ cảnh này
Nghe có vẻ có ngữ nghĩa với “mục tiêu” là một phần của tên thuộc tính, nhưng nó không có ngữ nghĩa. Thậm chí nói như vậy
Thông số kỹ thuật dành cho tác nhân người dùng không được xác định các thuộc tính này có bất kỳ giá trị có ý nghĩa nào
Ngoài ra, các thuộc tính data-* được thiết kế để sử dụng khi không có lựa chọn thay thế nào khác, nhưng vẫn tồn tại một thuộc tính phù hợp hơn
Thuộc tính dữ liệu tùy chỉnh nhằm mục đích lưu trữ dữ liệu tùy chỉnh ở chế độ riêng tư cho trang hoặc ứng dụng mà không có thuộc tính hoặc thành phần nào phù hợp hơn
Sự thay thế tốt hơn trong bối cảnh này
Trong một bài viết trước của tôi, tôi đã thảo luận về giá trị của và tôi minh họa cách một nhà phát triển có thể đạt được nhiều mục tiêu giống hệt nhau với ARIA thay vì các lớp hoặc trong trường hợp này là các thuộc tính data-*
Trong ngữ cảnh này, thuộc tính aria-controls sẽ phù hợp hơn. Nó không chỉ có nhiều ngữ nghĩa hơn mà còn bổ sung thông tin cần thiết cho trình đọc màn hình ban đầu không có trong ví dụ trên. Mã sẽ trông như thế này
Nhóm Bootstrap nên cân nhắc sử dụng điều khiển aria trên phương thức của họ. Xem “Ghi chú 1" ở cuối trangTôi nghĩ sẽ an toàn khi cho rằng hầu như mỗi khi bạn sử dụng mục tiêu dữ liệu, bạn đang xử lý một nút điều khiển một phần tử khác. Có thể có các trường hợp cạnh khác, nhưng bối cảnh này rất có thể là phần lớn các trường hợp sử dụng. Ở đây, điều khiển aria là giải pháp thay thế tốt hơn
Nếu bạn thấy mình đang sử dụng mục tiêu dữ liệu trong ngữ cảnh bên ngoài nút điều khiển một phần tử khác, thì có lẽ có một thuộc tính ARIA phù hợp với trường hợp sử dụng của bạn, chẳng hạn như hoặc. Phương án cuối cùng — nếu không còn thuộc tính nào phù hợp hơn — thì hãy sử dụng data-target. Nhưng, xin đừng mặc định nó
Có khả năng, có một thuộc tính ARIA cho điều đó
Cần nghiêm túc tìm kiếm các thuộc tính có ý nghĩa hơn ngoài việc chỉ đặt mặc định cho các thuộc tính data-* trong quy trình phát triển web của bạn. Dành thời gian để xem xét làm thế nào ứng dụng của bạn sẽ chống đạn và dễ truy cập nhất có thể chỉ là lập trình tốt
Dưới đây là một vài thuộc tính [] ARIA bổ sung mang lại lợi ích tương tự cho các điều khiển aria
- aria-press=“true” — sử dụng lớp này thay cho lớp “hoạt động” trên các nút
- aria-selected=“true” — sử dụng lớp này thay cho lớp “đang hoạt động” hoặc “được chọn” trên các tab
- aria-current=“true” — sử dụng lớp này thay vì lớp “hoạt động” trên phân trang và menu
- =“true” — sử dụng lớp này thay vì lớp “mở” trên đàn accordions và các tiện ích có thể chuyển đổi tương tự khác và các nút của chúng
Lợi ích của phương pháp này
Sử dụng các thuộc tính ARIA để định kiểu và đặt trạng thái trong JavaScript sẽ luôn có những lợi ích này
- Đơn giản và nhanh như phương pháp thông thường sử dụng các thuộc tính data-* [hoặc áp dụng/xóa các lớp]
- Khả năng tiếp cận tốt hơn được tích hợp ngay từ đầu
- Nhiều ngữ nghĩa hơn vì các thuộc tính ARIA cung cấp ý nghĩa
Nhược điểm duy nhất ở đây là đường cong học tập liên quan đến việc sử dụng ARIA đúng cách - đó là một điều khác cần học trong thế giới phát triển web. Ngày trước, sự thất vọng xung quanh việc học CSS thay vì sử dụng bảng để bố trí là như nhau. Mặc định các phương pháp hiện tại của bạn luôn dễ dàng hơn — thay đổi khó hơn. Tuy nhiên, mọi người đều được hưởng lợi từ những thay đổi như thế này về lâu dài
Nhận xét & phản hồi
Như mọi khi, tôi muốn nghe suy nghĩ và phản hồi của mọi người về việc thay thế càng nhiều thuộc tính data-* và lớp CSS càng tốt bằng nhiều tùy chọn ngữ nghĩa hơn, chẳng hạn như thuộc tính ARIA
Phương thức
0 chỉ nhận giá trị thuộc tính cho phần tử đầu tiên trong tập hợp phù hợp. Để lấy giá trị cho từng phần tử riêng lẻ, hãy sử dụng cấu trúc vòng lặp, chẳng hạn như phương thức
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
1 hoặc
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
2 của jQuery
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Sử dụng phương thức
0 của jQuery để lấy giá trị thuộc tính của phần tử có hai lợi ích chính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
- Tiện. Nó có thể được gọi trực tiếp trên một đối tượng jQuery và được kết nối với các phương thức jQuery khác
- Tính nhất quán giữa các trình duyệt. Giá trị của một số thuộc tính được báo cáo không nhất quán giữa các trình duyệt và thậm chí trên các phiên bản của một trình duyệt. Phương pháp
0 làm giảm sự không nhất quán như vậyattr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Ghi chú. Giá trị thuộc tính là các chuỗi ngoại trừ một vài thuộc tính như giá trị và chỉ mục tab
Kể từ jQuery 1. 6, phương thức
0 trả về
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
6 cho các thuộc tính chưa được đặt. Để truy xuất và thay đổi các thuộc tính DOM, chẳng hạn như trạng thái
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
7,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
8 hoặc
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
9 của các thành phần biểu mẫu, hãy sử dụng. phương pháp chống đỡ []
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Thuộc tính so với. Tính chất
Sự khác biệt giữa thuộc tính và thuộc tính có thể quan trọng trong các tình huống cụ thể. Trước jQuery 1. 6, phương pháp
0 đôi khi tính đến các giá trị thuộc tính khi truy xuất một số thuộc tính, điều này có thể gây ra hành vi không nhất quán. Kể từ jQuery 1. 6, phương thức
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
11 cung cấp một cách để truy xuất các giá trị thuộc tính một cách rõ ràng, trong khi
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
0 truy xuất các thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Ví dụ:
13,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
14,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
15,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
16,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
17,
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
18 và
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
19 nên được truy xuất và đặt bằng phương thức
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
00. Trước jQuery 1. 6, các thuộc tính này có thể truy xuất được bằng phương thức
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
0, nhưng điều này không nằm trong phạm vi của
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
02. Chúng không có thuộc tính tương ứng và chỉ là thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Liên quan đến các thuộc tính boolean, hãy xem xét một phần tử DOM được xác định bởi mã đánh dấu HTML
03 và giả sử nó nằm trong một biến JavaScript có tên là
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
04
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
05_______206 [Boolean] Sẽ thay đổi với trạng thái hộp kiểm
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
07
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
06 [Boolean] Sẽ thay đổi với trạng thái hộp kiểm
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
09
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
00 [Chuỗi] Trạng thái ban đầu của hộp kiểm; . 6+]
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
00 [Chuỗi] Trạng thái ban đầu của hộp kiểm; . 6]
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
06 [Boolean] Đã thay đổi với trạng thái hộp kiểm
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Theo , thuộc tính
7 là a , có nghĩa là thuộc tính tương ứng là đúng nếu thuộc tính đó hoàn toàn tồn tại—ngay cả khi, ví dụ: thuộc tính không có giá trị hoặc được đặt thành giá trị chuỗi trống hoặc thậm chí là "sai". Điều này đúng với tất cả các thuộc tính boolean
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Tuy nhiên, khái niệm quan trọng nhất cần nhớ về thuộc tính
7 là nó không tương ứng với thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
7. Thuộc tính thực sự tương ứng với thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
18 và chỉ nên được sử dụng để đặt giá trị ban đầu của hộp kiểm. Giá trị thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
7 không thay đổi theo trạng thái của hộp kiểm, trong khi thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
7 thì không. Do đó, cách tương thích với nhiều trình duyệt để xác định xem hộp kiểm có được chọn hay không là sử dụng thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
11attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
12attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
13attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Điều này cũng đúng với các thuộc tính động khác, chẳng hạn như
8 và
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
15
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Ghi chú bổ sung
- Trong Internet Explorer trước phiên bản 9, việc sử dụng
00 để đặt thuộc tính phần tử DOM thành bất kỳ giá trị nguyên thủy đơn giản nào [số, chuỗi hoặc boolean] có thể gây rò rỉ bộ nhớ nếu thuộc tính không bị xóa [sử dụngattr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
17] trước phần tử DOM . Để đặt các giá trị một cách an toàn trên các đối tượng DOM mà không bị rò rỉ bộ nhớ, hãy sử dụngattr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
18attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
ví dụ
Hiển thị thuộc tính đã chọn và thuộc tính của hộp kiểm khi nó thay đổi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
9
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Thử nghiệm
Find the title attribute of the first in the page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Thử nghiệm
.attr[ attributeName, value ]Trả về.
Sự miêu tả. Đặt một hoặc nhiều thuộc tính cho tập hợp các phần tử phù hợp
phiên bản thêm. 1. 0
tên thuộc tính
Loại.
Tên thuộc tính cần đặt
giá trị
Loại. hoặc hoặc
Một giá trị để đặt cho thuộc tính. Nếu
19, thuộc tính được chỉ định sẽ bị xóa [như trongattr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
20]attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
phiên bản thêm. 1. 0
thuộc tính
Loại.
Một đối tượng của các cặp thuộc tính-giá trị để đặt
phiên bản thêm. 1. 1
tên thuộc tính
Loại.
Tên thuộc tính cần đặt
chức năng
Loại. [ chỉ mục, attr ] => hoặc
Một hàm trả về giá trị được đặt.
21 là phần tử hiện tại. Nhận vị trí chỉ mục của phần tử trong tập hợp và giá trị thuộc tính cũ làm đối sốattr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Phương thức
0 là một cách thuận tiện để đặt giá trị của các thuộc tính—đặc biệt là khi đặt nhiều thuộc tính hoặc sử dụng các giá trị do một hàm trả về. Hãy xem xét hình ảnh sau đây
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
1
1
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Đặt thuộc tính đơn giản
Để thay đổi thuộc tính
23, chỉ cần chuyển tên của thuộc tính và giá trị mới của nó cho phương thức
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
0
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
1
0
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Thêm một thuộc tính theo cùng một cách
1
0
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Đặt nhiều thuộc tính cùng một lúc
Để thay đổi thuộc tính
23 và thêm thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
26 cùng một lúc, hãy chuyển cả hai bộ tên và giá trị vào phương thức cùng một lúc bằng cách sử dụng một đối tượng JavaScript đơn giản. Mỗi cặp khóa-giá trị trong đối tượng thêm hoặc sửa đổi một thuộc tính
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
1
2
3
4
1
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Khi đặt nhiều thuộc tính, dấu ngoặc kép xung quanh tên thuộc tính là tùy chọn
CẢNH BÁO. Khi đặt thuộc tính 'lớp', bạn phải luôn sử dụng dấu ngoặc kép
Ghi chú. Cố gắng thay đổi thuộc tính
27 trên phần tử
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
28 hoặc
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
29 được tạo qua
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
60 sẽ tạo ra một ngoại lệ trên Internet Explorer 8 trở lên
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Giá trị thuộc tính được tính toán
Bằng cách sử dụng một hàm để đặt thuộc tính, bạn có thể tính toán giá trị dựa trên các thuộc tính khác của phần tử. Ví dụ: để nối một giá trị mới với một giá trị hiện có
1
2
3
2
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
Việc sử dụng hàm này để tính giá trị thuộc tính có thể đặc biệt hữu ích khi sửa đổi thuộc tính của nhiều phần tử cùng một lúc
Ghi chú. Nếu không có gì được trả về trong hàm setter [tức là.
61], hoặc nếu trả về
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];
6, giá trị hiện tại không thay đổi. Điều này hữu ích cho việc cài đặt có chọn lọc các giá trị chỉ khi các tiêu chí nhất định được đáp ứng
attr demo
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
Once there was a large dinosaur...
The title of the emphasis is:
var title = $[ "em" ].attr[ "title" ];
$[ "div" ].text[ title ];