Hướng dẫn change text color on click css - thay đổi màu văn bản khi nhấp vào css

Question

Ngày 15 tháng 3 năm 2011 lúc 6:06 AM #32010 #32010

Nội dung chính Show

Màu sắc lựa chọn văn bản
Cách thay đổi màu sắc lựa chọn văn bản
Mục lục #
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 khi nhấp vào 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 #

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 “onclick”.





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>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div>Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

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';
});

Hướng dẫn change text color on click css - thay đổi màu văn bản khi nhấp vào css

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!
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';
});

8.

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ể

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div>Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

9 thuộc tính

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div>Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

7 để xem phần tử DOM được người dùng nhấp vào.

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

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';
});

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.

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

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';
});

4 của phần tử khác.

Chúng ta hãy thêm

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';
});

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!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div id="box">Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

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

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';
});

8.

programming css Selection CSS

Hướng dẫn change text color on click css - thay đổi màu văn bản khi nhấp vào css

Màu sắc lựa chọn văn bản

Cách thay đổi màu sắc lựa chọn văn bản

Thí dụ

Mục lục #

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 khi nhấp vào 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 #

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội