Làm thế nào để tương tác với các thuộc tính đối tượng với chức năng attr của CSS3 ()

Chức năng attr () rất thú vị vì nó cho phép bạn tương tác với bất kỳ thuộc tính nào của một đối tượng như một phần của một phong cách. Bạn thấy chức năng này được sử dụng trong một số cách độc đáo trên Internet, mặc dù nó có vẻ là một bí mật được giữ tốt cho hầu hết các phần.

Một trang web thể hiện một ứng dụng nhanh dựa vào attr () là Tính mới: Sử dụng hiệu ứng hình ảnh CSS3. Thủ tục dưới đây thể hiện hàm attr () theo cách đơn giản để bạn có thể hiểu rõ hơn về một số ví dụ trực tuyến minh họa nó một cách chi tiết.

1. Tạo một tệp HTML5 mới với trình chỉnh sửa văn bản của bạn.

2. Nhập mã sau đây cho trang HTML.

   Sử dụng hàm attr ()
   
   Sử dụng hàm attr ()
   Thế giới
   

   Tất cả những gì bạn có ở đây là tiêu đề và đoạn văn. Lưu ý rằng đoạn văn định nghĩa một thuộc tính chuẩn, id và một thuộc tính không chuẩn, TestText. Thuộc tính bạn sử dụng cho hàm attr () không phải là tiêu chuẩn - bạn có thể định nghĩa bất kỳ thuộc tính nào mong muốn.

3. Lưu tập tin dưới dạng Attr. HTML.

4. Tạo tệp tin CSS mới với trình soạn thảo văn bản của bạn.

5. Gõ thông tin kiểu CSS sau đây.

   #TestMe: before {content: attr (TestText);}
   

   Phong cách bắt đầu bằng cách nói rằng đầu ra từ kiểu dáng nên xuất hiện trước khi thẻ được TestMe tham chiếu là một id. Sau đó nó sẽ đặt nội dung của vùng đó vào giá trị hiện tại của thuộc tính TestText bằng cách sử dụng hàm attr ().

6. Lưu tệp là Attr. CSS.

7. Nạp ví dụ Attr.

   Đầu ra là khá nhiều những gì bạn mong muốn, Hello World. Chức năng attr () có thể cho phép bạn ẩn và sử dụng tất cả các loại thông tin trong các trang của bạn, sử dụng lại thông tin theo nhiều cách khác nhau hoặc thậm chí thực hiện các công việc gỡ lỗi.