Văn bản là tài sản quan trọng nhất và dễ thấy nhất đối với mọi ứng dụng hoặc trang web, nếu không sử dụng văn bản thì người sáng tạo không thể truyền tải đầy đủ suy nghĩ của mình hoặc cung cấp thông tin một cách chính xác. Do nhu cầu và tầm quan trọng của nó, kiểu dáng của nó cũng trở thành cơn ác mộng đối với hầu hết các nhà phát triển. Đối với văn bản tĩnh, các thuộc tính CSS và khung của nó giúp ích rất nhiều nhưng vẫn cần một thuộc tính có thể được áp dụng cho kiểu động. May mắn thay, thuộc tính này được cung cấp bởi JavaScript có tên “ văn bảnTrang trí ”.
Blog này sẽ cung cấp quy trình áp dụng các kiểu trên phần tử HTML thông qua thuộc tính textDecoration.
Làm cách nào để áp dụng kiểu bằng cách sử dụng thuộc tính textDecoration kiểu HTML DOM?
Phong cách DOM “ văn bảnTrang trí ” Về cơ bản, thuộc tính này thực hiện việc tạo kiểu như thêm “ gạch chân', 'chồng trên', 'xuống dòng' và 'nhấp nháy ” trên một phần tử được chọn. Thuộc tính này khi được đặt thành “ không có ” xóa kiểu mặc định được áp dụng cho phần tử đó giống như thẻ liên kết.
Cú pháp
Cú pháp cho thuộc tính textDecoration kiểu DOM là:
eleObj. phong cách . văn bảnTrang trí = 'none|overline|nhấp nháy|gạch chân|ban đầu|xuyên dòng|kế thừa'
Hãy truy cập bảng bên dưới để có ý tưởng nhanh về các giá trị có thể được gán cho “ văn bảnTrang trí ' tài sản:
| Giá trị | Giải trình |
|---|---|
| không có | Chuyển đổi văn bản sang định dạng đơn giản, loại bỏ tất cả kiểu dáng được xác định trước; nó là mặc định |
| gạch chân | Chèn một dòng lên trên hoặc trên văn bản đã chọn. |
| chớp mắt | Làm cho văn bản nhấp nháy nhưng nó không được tất cả các trình duyệt web hỗ trợ. |
| gạch chân | Nó đặt dòng dưới hoặc ở dưới cùng của văn bản đã chọn. |
| ban đầu | Đặt thuộc tính được áp dụng thành giá trị mặc định, giá trị này không có trong trường hợp của chúng tôi. |
| đường cắt ngang | Đặt dòng ở giữa văn bản, tức là giữa văn bản. |
| bạn thừa hưởng | Kế thừa thuộc tính được áp dụng cho phần tử gốc hoặc phần tử cha. |
Bây giờ, chúng ta hãy xem qua quá trình triển khai và ảnh hưởng của nó đối với văn bản đối với từng giá trị của “ văn bảnTrang trí ' tài sản.
Ví dụ 1: Thuộc tính “textDecoration = none”
Việc triển khai thực tế “ văn bảnTrang trí ” tài sản có giá trị là “ không có ” sẽ được giải thích trong đoạn mã dưới đây:
< thân hình >
< trung tâm >
< h1 phong cách = 'màu: xanh thiếu sinh quân;' > Linux < / h1 >
< cái nút trong một cái nhấp chuột = 'Ứng dụng()' > Ứng dụng < / cái nút >
< P > Khi giá trị của thuộc tính textDecoration được đặt thành không: < / P >
< h3 nhận dạng = 'trường hợp sử dụng' phong cách = 'trang trí văn bản: gạch ngang;' > Phần tử được nhắm mục tiêu < / h3 >
< / trung tâm >
< kịch bản >
hàm Applier() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / kịch bản >
< / thân hình >
Giải thích về đoạn mã nêu trên:
- Đầu tiên, hãy sử dụng dấu “< cái nút >” để tạo một nút và gán cho nó một trình xử lý sự kiện “ trong một cái nhấp chuột ”. Trình xử lý sự kiện này kích hoạt một hàm JavaScript có tên “ Ứng dụng ”.
- Tiếp theo, tạo phần tử được nhắm mục tiêu “ h3 ” và gán cho nó một id duy nhất là “ trường hợp sử dụng ”. Ngoài ra, hãy áp dụng CSS “ trang trí văn bản ” thuộc tính của nó có giá trị là “ gạch chân ” với sự trợ giúp của “ phong cách ' thuộc tính.
- Bây giờ, hãy nhập vào “ Ứng dụng ()” nội dung hàm và chọn phần tử được nhắm mục tiêu thông qua id của nó “ trường hợp sử dụng ” và đính kèm phong cách “ văn bảnTrang trí ' tài sản.
- Sau đó, gán cho thuộc tính một giá trị là “ không có ” để xóa mọi kiểu trang trí văn bản được áp dụng trước trên phần tử.
Chế độ xem trang web sau khi thực thi đoạn mã trên:
Đầu ra hiển thị kiểu dáng trước được áp dụng trên phần tử được nhắm mục tiêu sẽ bị xóa bằng cách gán cho nó giá trị “ không có ”.
Ví dụ 2: Thuộc tính “textDecoration = first”
Đoạn mã dưới đây minh họa việc triển khai “ văn bảnTrang trí ” thuộc tính khi giá trị của “ ban đầu ” được gán cho nó:
< kịch bản >chức năng Ứng dụng ( ) {
tài liệu. getElementById ( 'trường hợp sử dụng' ) . phong cách . văn bảnTrang trí = 'ban đầu' ;
}
kịch bản >
Đầu ra được tạo sau khi biên dịch đoạn mã trên được hiển thị bên dưới:
Kết quả đầu ra ở trên cho thấy giá trị của trang trí văn bản được đặt thành giá trị mặc định là “ không có ” và do đó tất cả kiểu dáng trước đã được hoàn nguyên.
Ví dụ 3: Thuộc tính “textDecoration = overline”
Đoạn mã dưới đây cho thấy cách triển khai thực tế của “ văn bảnTrang trí ” thuộc tính khi giá trị của “ gạch chân ” được cung cấp cho nó:
< thân hình >< trung tâm >
< h1 phong cách = 'màu: xanh thiếu sinh quân;' > Linux < / h1 >
< cái nút trong một cái nhấp chuột = 'Ứng dụng()' > Ứng dụng < / cái nút >
< P > Khi giá trị của thuộc tính textDecoration được đặt thành overline: < / P >
< h3 nhận dạng = 'trường hợp sử dụng' > Phần tử được nhắm mục tiêu < / h3 >
< / trung tâm >
< kịch bản >
hàm Applier() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / kịch bản >
< / thân hình >
Giải thích về đoạn mã trên được nêu dưới đây:
- Đầu tiên ' nút” và “h3 ” phần tử được tạo theo cách tương tự và thuộc tính CSS được áp dụng trên “h3” phần tử bây giờ đã bị loại bỏ.
- Tiếp theo, bên trong “ Ứng dụng ” chức năng phần tử được nhắm mục tiêu được chọn và “ văn bảnTrang trí ” tài sản có giá trị là “ gạch chân ” được gán cho phần tử.
Đầu ra sau khi thực thi đoạn mã trên được hiển thị bên dưới:
Đầu ra cho thấy tác dụng của “ textDecoration = gạch ngang ” thuộc tính trên văn bản.
Ví dụ 4: Thuộc tính “textDecoration = gạch chân”
Việc triển khai thực tế của văn bản khi giá trị của “ gạch chân ” được gán cho “ văn bảnTrang trí ” tài sản được nêu dưới đây:
< kịch bản >chức năng Ứng dụng ( ) {
tài liệu. getElementById ( 'trường hợp sử dụng' ) . phong cách . văn bảnTrang trí = 'gạch chân' ;
}
kịch bản >
Sau khi biên dịch, kết quả đầu ra trông như thế này:
Kết quả đầu ra hiển thị dòng được thêm vào cuối văn bản.
Ví dụ 5: Thuộc tính “textDecoration = line-through”
Triển khai trực quan “ văn bảnTrang trí ” tài sản có giá trị là “ đường cắt ngang ” được hiển thị bên dưới:
< kịch bản >chức năng Ứng dụng ( ) {
tài liệu. getElementById ( 'trường hợp sử dụng' ) . phong cách . văn bảnTrang trí = 'đường cắt ngang' ;
}
kịch bản >
Đầu ra được tạo cho đoạn mã trên được hiển thị bên dưới:
Đầu ra cho thấy hiệu ứng được thực hiện bởi “ đường cắt ngang ” trên văn bản phần tử được nhắm mục tiêu.
Phần kết luận
Kiểu HTML DOM “ văn bảnTrang trí Thuộc tính ” đặc biệt xử lý việc tạo kiểu cho các thành phần HTML thông qua JavaScript để thực hiện tạo kiểu động trên các thành phần văn bản. Nhiều giá trị có thể được gán cho “ văn bảnTrang trí ” để thực hiện các biến thể khác nhau của kiểu dáng. Những giá trị này là “ không có', 'nội dung', 'gạch chân', 'xuống dòng', 'ban đầu', 'nhấp nháy' và 'kế thừa ”. Blog này đã giải thích thành công quy trình mà nhà phát triển có thể áp dụng các kiểu bằng thuộc tính textDecoration.