Tạo kiểu cho các phần tử bằng JavaScript
Giả sử chúng ta có một số đoạn văn:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Hãy lặp qua các đoạn văn này bằng vòng lặp và thêm vào cuối
mỗi đoạn văn một liên kết, khi nhấp vào
liên kết đó thì văn bản của đoạn văn sẽ được thêm vào
một số kiểu dáng. Ví dụ, văn bản của đoạn văn
sẽ bị gạch ngang (điều này được thực hiện bởi
thuộc tính CSS text-decoration).
Hãy thảo luận về hai điểm cần lưu ý của nhiệm vụ như vậy.
Thứ nhất, như đã thảo luận trong các bài học trước, không nên thay đổi kiểu của đoạn văn trực tiếp qua JavaScript - sẽ thuận tiện hơn nhiều nếu thêm các lớp CSS nào đó.
Thứ hai, khi thực hiện nhiệm vụ như vậy, bạn sẽ gặp một điều bất ngờ. Để hiểu bản chất của nó, hãy xem mã HTML của các đoạn văn sau khi thêm liên kết:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Bây giờ hãy tưởng tượng rằng khi nhấp vào liên kết văn bản của đoạn văn sẽ bị gạch ngang. Tuy nhiên, liên kết trong trường hợp này cũng là một phần của đoạn văn và cũng sẽ bị gạch ngang! Rất có thể hiệu ứng như vậy không phải là điều chúng ta muốn. Chúng ta muốn văn bản bị gạch ngang, nhưng liên kết thì không.
Để giải quyết vấn đề, chỉ cần bọc
văn bản của đoạn văn trong thẻ span, như thế này:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
Cho mã HTML sau:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Thêm vào cuối mỗi đoạn văn một liên kết, khi nhấp vào đó, văn bản của đoạn văn sẽ bị gạch ngang (còn liên kết thì không).
Hãy sửa đổi nhiệm vụ trước đó sao cho sau khi nhấp vào liên kết, liên kết đó sẽ bị xóa khỏi đoạn văn (và văn bản của đoạn văn sẽ bị gạch ngang).
Cho một bảng HTML nào đó. Hãy thêm vào bảng này một cột nữa chứa liên kết. Khi nhấp vào liên kết này, hàng chứa liên kết đó phải có màu nền xanh lá cây.
Hãy sửa đổi nhiệm vụ trước đó sao cho lần nhấp đầu tiên vào liên kết sẽ tô màu nền hàng thành xanh lá, còn lần nhấp thứ hai sẽ hủy bỏ hành động này.
