Ngày 15 tháng 3 năm 2011 lúc 6:06 AM #32010 #32010
Xin chào các bạn, tôi muốn biết, nếu nó có thể thay đổi màu sắc [màu văn bản/nền] của một lớp văn bản nhất định khi bạn nhấp vào liên kết mà không có JavaScript. Nếu có có, thì thế nào?
If “YES”, How?
Ngày 15 tháng 3 năm 2011 lúc 8:07 sáng #55558 #55558
Xin chào Fourize, rất tuyệt ,,,, Cảm ơn :-]
very cool,,,, thanks :-]
Nhưng tôi có thể làm cho nó hoàn toàn với CSS và làm việc trên FF và IE không?
Ngày 15 tháng 3 năm 2011 lúc 8:57 AM #55559 #55559
Tùy thuộc vào nhu cầu thực tế của bạn, bạn có thể sử dụng lớp giả CSS đang hoạt động để mô phỏng trên mạng.active to simulate “ title”.
a {color: red}
a:active {color: blue} /* When clicked [or clicked and held] the color will be blue */
Tìm hiểu cách ghi đè màu lựa chọn văn bản mặc định với CSS.
Màu sắc lựa chọn văn bản
Chọn văn bản sau:
Màu sắc lựa chọn văn bản mặc định
Màu sắc lựa chọn văn bản tùy chỉnh
Cách thay đổi màu sắc lựa chọn văn bản
Sử dụng bộ chọn ::selection
để ghi đè màu lựa chọn văn bản mặc định:
Thí dụ
::-moz-selection { / * mã cho firefox * /& nbsp; Màu sắc: Đỏ; & nbsp; Bối cảnh: màu vàng;}
color: red;
background: yellow;
}
:: Lựa chọn {& nbsp; Màu sắc: Đỏ; & nbsp; Bối cảnh: màu vàng;}
color: red;
background: yellow;
}
Hãy tự mình thử »
Mẹo: Đọc thêm về bộ chọn :: Lựa chọn trong Tài liệu tham khảo CSS của chúng tôi: CSS :: Tính thuộc tính. Read more about the ::selection selector in our CSS Reference: CSS ::selection Property.
Mục lục #
- Thay đổi màu văn bản của tài liệu khi nhấp vào nhấp chuột
- Thay đổi màu văn bản của phần tử trên nhấp chuột
- Thay đổi màu văn bản của phần tử khác khi nhấp vào nhấp chuột
Thay đổi màu văn bản của tài liệu trên nhấp chuột #
Để thay đổi màu văn bản của tài liệu trên nhấp chuột:
- Thêm trình nghe sự kiện
click
vào một phần tử. - Mỗi lần nhấp vào phần tử, đặt thuộc tính
document.body.style.color
thành một màu cụ thể. - Thay đổi màu văn bản sẽ là toàn cầu trừ khi được ghi đè.
Đây là HTML cho ví dụ trong bài viết này.
Copied!
DOCTYPE html> Some text here Button
Và đây là mã JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
Mỗi lần nhấp vào nút, chúng tôi thay đổi màu văn bản của ____ 26 thành Copied!
8.const btn = document.getElementById['btn'];
btn.addEventListener['click', function onClick[event] {
// 👇️ Change text color globally
document.body.style.color = 'darkgreen';
// 👇️ Change text color for clicked element only
// event.target.style.color = 'salmon';
}];
Mục lục #
Thay đổi màu văn bản của tài liệu khi nhấp vào nhấp chuột
Thay đổi màu văn bản của phần tử trên nhấp chuột
- Thay đổi màu văn bản của phần tử khác khi nhấp vào nhấp chuột
- Thay đổi màu văn bản của tài liệu trên nhấp chuột #
- Để thay đổi màu văn bản của tài liệu trên nhấp chuột:
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color for clicked element only event.target.style.color = 'salmon'; }];
Thêm trình nghe sự kiện click
vào một phần tử.
Mỗi lần nhấp vào phần tử, đặt thuộc tính document.body.style.color
thành một màu cụ thể.
Thay đổi màu văn bản sẽ là toàn cầu trừ khi được ghi đè.
Bạn có thể
9 thuộc tínhCopied!
DOCTYPE html> Some text here Button
7 để xem phần tử DOM được người dùng nhấp vào.Copied!
DOCTYPE html> Some text here Button
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { console.log[event.target]; // 👇️ Change text color for clicked element only event.target.style.color = 'salmon'; }];
Nếu bạn nhấp vào nút và xem đầu ra
1 của bạn, bạn sẽ thấy phần tửCopied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
2 được ghi lại.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
Thay đổi màu văn bản của phần tử khác trên nhấp chuột #
Để thay đổi màu văn bản của phần tử khác trên nhấp chuột:
- Thêm trình nghe sự kiện
click
cho một trong các yếu tố. - Mỗi lần nhấp vào phần tử, thay đổi thuộc tính
4 của phần tử khác.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
Chúng ta hãy thêm
5 vào phần tửCopied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
6, vì vậy chúng ta có thể chọn nó.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];
Copied!
DOCTYPE html> Some text here Button
Và đây là mã JavaScript liên quan.
Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { const box = document.getElementById['box']; box.style.color = 'salmon'; }];
Mỗi lần nhấp vào nút, chúng tôi thay đổi màu văn bản của ____ 26 thành
8.Copied!
const btn = document.getElementById['btn']; btn.addEventListener['click', function onClick[event] { // 👇️ Change text color globally document.body.style.color = 'darkgreen'; // 👇️ Change text color for clicked element only // event.target.style.color = 'salmon'; }];