Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Trong bài viết này, mình xin hướng dẫn các bạn cách đổi màu đoạn văn khi được bôi đen sử dụng CSS nhé 😁.

Để đổi màu text thì chúng ta đơn giản chỉ cần sử dụng selector ::selection trong CSS và sử dụng thuộc tính background với màu muốn đổi.

::selection {
  background: yellow;
}

Kết quả chúng ta được như dưới đây.

Change Text Highlight Color with CSS

Cách làm rất đơn giản đúng không 😁. Bây giờ chúng ta thử kết hợp với một chút JavaScript để random background khi bôi đen văn bản nhé ^^.

Chúng ta sẽ thử đổi màu highlight với các màu cho trước, để làm điều đó thì các bạn xem bài viết đổi màu background bằng JavaScript để nắm được ý tưởng nhé ^^.

Đầu tiên chúng ta sẽ có một mảng các màu để random, dưới đây là một ví dụ:

const colors = ["#FFFFD0", "#F3CCFF", "#D09CFA", "#A555EC", "#FCE700"];

Sau đó, chúng ta sử dụng event mousedown, khi người dùng nhấn nút chuột để chọn một số văn bản thì event mousedown sẽ được gọi. Vì vậy chúng ta sẽ viết một hàm xử lý với event này.

const colors = ["#FFFFD0", "#F3CCFF", "#D09CFA", "#A555EC", "#FCE700"];

window.addEventListener("mousedown", () => {
  const random = Math.floor(Math.random() * colors.length); // random 0 -> 4

  const randomColor = colors[random];

  document.documentElement.style.setProperty("--highlight-color", randomColor);
});

Ở đoạn code trên, chúng ta viết chức năng random, vì index của mảng colors bắt đầu từ 0 và mảng có 5 màu nên chúng ta sẽ random trong khoảng từ 0 -> 4.

Sau khi đã lấy ngẫu nhiên một màu từ colors, chúng ta sẽ set lại giá trị cho CSS variable --highlight-color bằng màu random. Mình đặt --highlight-color ở thẻ root HTML nên sử dụng document.documentElement.

Với CSS, các bạn có thể khởi tạo --highlight-color với màu bất kỳ hoặc null và sử dụng ::selection với giá trị của --highlight-color.

:root {
  --highlight-color: red;
}

::selection {
  background: var(--highlight-color);
}

Kết quả sẽ được như sau:


Hi vọng bài viết giúp ích cho các bạn, chúng ta sẽ cùng gặp nhau trong các bài viết khác nhé ^^.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.