Làm cách nào để thay đổi màu của trường văn bản trong JavaScript?

Question

Ví dụ

Đặt màu văn bản cho các thành phần khác nhau

Nội dung chính Show

Định nghĩa và cách sử dụng
Hỗ trợ trình duyệt
Giá trị tài sản
chi tiết kỹ thuật
Thêm ví dụ
Trang liên quan
Làm cách nào để thay đổi màu của trường văn bản trong js?
Làm cách nào để thay đổi màu nền của trường trong JavaScript?
Làm cách nào để thay đổi màu giá trị trong JavaScript?

tài liệu. getElementById("myH2"). phong cách. màu = "#ff0000";
tài liệu. getElementById("myP"). Phong cách. color = "đỏ tươi";
tài liệu. getElementById("myP2"). phong cách. màu = "màu xanh";
tài liệu. getElementById("myDiv"). phong cách. màu = "xanh nhạt";

Tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính color đặt hoặc trả về màu của văn bản

Hỗ trợ trình duyệt

Màu thuộc tính Có Có Có Có Có

cú pháp

Trả về thuộc tính màu

Đặt thuộc tính màu

sự vật. Phong cách. màu = "màu. ban đầu. thừa kế"

Giá trị tài sản

ValueDescriptioncolorChỉ định màu của văn bản. Xem Giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể ban đầuĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

chi tiết kỹ thuật

Giá trị mặc định. không được chỉ định Giá trị trả về. Một Chuỗi, đại diện cho màu văn bản của một phần tửCSS Phiên bảnCSS1

Thêm ví dụ

Ví dụ

Trả lại màu văn bản của một

yếu tố

cảnh báo (tài liệu. getElementById("myP"). Phong cách. màu sắc);

Tự mình thử »

Trang liên quan

hướng dẫn CSS. Văn bản CSS

tham chiếu CSS. thuộc tính màu

Các phần tử <input> thuộc loại color cung cấp một phần tử giao diện người dùng cho phép người dùng chỉ định một màu, bằng cách sử dụng giao diện bộ chọn màu trực quan hoặc bằng cách nhập màu vào trường văn bản ở định dạng thập lục phân

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

0

Chỉ cho phép các màu đơn giản (không có kênh alpha) mặc dù các màu CSS có nhiều định dạng hơn, e. g. tên màu, ký hiệu chức năng và định dạng thập lục phân với kênh alpha

Cách trình bày của phần tử có thể thay đổi đáng kể từ một trình duyệt và/hoặc nền tảng này sang một trình duyệt khác—nó có thể là một đầu vào văn bản đơn giản tự động xác thực để đảm bảo rằng thông tin màu được nhập ở định dạng phù hợp hoặc bộ chọn màu theo tiêu chuẩn nền tảng hoặc một số loại

Phần tử của một <input> thuộc loại color luôn là một chuỗi chứa chuỗi 7 ký tự chỉ định màu RGB ở định dạng thập lục phân. Mặc dù bạn có thể nhập màu ở dạng chữ hoa hoặc chữ thường, nhưng nó sẽ được lưu trữ ở dạng chữ thường. Giá trị không bao giờ ở bất kỳ dạng nào khác và không bao giờ trống

Ghi chú. Đặt giá trị thành bất kỳ màu nào không phải là màu RGB hợp lệ, hoàn toàn trong suốt, theo ký hiệu thập lục phân sẽ dẫn đến giá trị được đặt thành

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

4. Đặc biệt, bạn không thể sử dụng tên màu chuẩn của CSS hoặc bất kỳ cú pháp hàm CSS nào để đặt giá trị. Điều này có ý nghĩa khi bạn nhớ rằng HTML và CSS là các ngôn ngữ và thông số kỹ thuật riêng biệt. Ngoài ra, các màu có kênh alpha không được hỗ trợ; . g.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

5) cũng sẽ dẫn đến việc màu được đặt thành

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

4

Đầu vào loại color rất đơn giản, do số lượng thuộc tính hạn chế mà chúng hỗ trợ

Bạn có thể cập nhật ví dụ đơn giản ở trên để đặt giá trị mặc định, sao cho ô màu được điền sẵn màu mặc định và bộ chọn màu (nếu có) cũng sẽ mặc định là màu đó

<input type="color" value="#ff0000" />

Nếu bạn không chỉ định giá trị, giá trị mặc định là

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

4, màu đen. Giá trị phải ở dạng ký hiệu thập lục phân gồm bảy ký tự, nghĩa là ký tự "#" theo sau là hai chữ số, mỗi chữ số đại diện cho màu đỏ, xanh lá cây và xanh lam, như thế này.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

0. Nếu bạn có màu ở bất kỳ định dạng nào khác (chẳng hạn như tên màu CSS hoặc chức năng màu CSS chẳng hạn như

colorWell.select();

0 hoặc

colorWell.select();

1), bạn sẽ phải chuyển đổi chúng thành hệ thập lục phân trước khi đặt giá trị

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

1

Như trường hợp của các loại <input> khác, có hai sự kiện có thể được sử dụng để phát hiện các thay đổi đối với giá trị màu.

colorWell.select();

4 và

colorWell.select();

5.

colorWell.select();

4 được kích hoạt trên phần tử <input> mỗi khi màu thay đổi. Sự kiện

colorWell.select();

5 được kích hoạt khi người dùng loại bỏ bộ chọn màu. Trong cả hai trường hợp, bạn có thể xác định giá trị mới của phần tử bằng cách xem

Đây là một ví dụ cho thấy đồng hồ thay đổi giá trị màu theo thời gian

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Khi một trình duyệt không hỗ trợ giao diện bộ chọn màu, việc triển khai đầu vào màu sẽ là một hộp văn bản tự động xác thực nội dung để đảm bảo rằng giá trị ở định dạng chính xác. Trong trường hợp này, bạn có thể sử dụng phương thức

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

0 để chọn văn bản hiện có trong trường chỉnh sửa

Thay vào đó, nếu trình duyệt sử dụng màu tốt, thì

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

0 không làm gì cả. Bạn nên biết hành vi này để mã của bạn có thể phản hồi thích hợp trong cả hai trường hợp

colorWell.select();

Giá trị của đầu vào màu được coi là không hợp lệ nếu tác nhân người dùng không thể chuyển đổi đầu vào của người dùng thành ký hiệu thập lục phân chữ thường gồm bảy ký tự. Nếu và khi trường hợp này xảy ra, lớp giả

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

2 được áp dụng cho phần tử

Hãy tạo một ví dụ thực hiện nhiều hơn một chút với đầu vào màu bằng cách theo dõi các sự kiện

colorWell.select();

5 và

colorWell.select();

4 để lấy màu mới và áp dụng nó cho mọi thành phần

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

5 trong tài liệu

HTML khá đơn giản — một vài đoạn tài liệu mô tả có <input> thuộc loại color với ID

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

8, mà chúng tôi sẽ sử dụng để thay đổi màu văn bản của đoạn văn

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

Đầu tiên, có một số thiết lập. Ở đây chúng tôi thiết lập một số biến, thiết lập một biến có chứa màu mà chúng tôi sẽ đặt màu tốt khi chúng tôi tải lên lần đầu tiên và sau đó thiết lập trình xử lý

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

9 để thực hiện công việc khởi động chính sau khi trang được tải đầy đủ

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Khởi tạo

Khi trang được tải, trình xử lý sự kiện

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

9 của chúng tôi,

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

1, được gọi

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

Điều này nhận được một tham chiếu đến phần tử màu <input> trong một biến có tên là

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

8, sau đó đặt giá trị của đầu vào màu thành giá trị trong

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

4. Sau đó, sự kiện

colorWell.select();

4 của đầu vào màu được thiết lập để gọi hàm

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

6 của chúng ta và sự kiện

colorWell.select();

5 được thiết lập để gọi

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

8. Cả hai đều được nhìn thấy dưới đây

Cuối cùng, chúng tôi gọi

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

0 để chọn nội dung văn bản của đầu vào màu nếu điều khiển được triển khai dưới dạng trường văn bản (điều này không có hiệu lực nếu thay vào đó là giao diện bộ chọn màu được cung cấp)

Phản ứng với sự thay đổi màu sắc

Chúng tôi cung cấp hai chức năng xử lý thay đổi màu sắc. Hàm

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

6 được gọi để đáp lại sự kiện

colorWell.select();

4. Nó thay đổi màu của phần tử đoạn đầu tiên trong tài liệu để khớp với giá trị mới của đầu vào màu. Vì các sự kiện

colorWell.select();

4 được kích hoạt mỗi khi thực hiện điều chỉnh giá trị (ví dụ: nếu độ sáng của màu tăng lên), những sự kiện này sẽ xảy ra lặp lại khi bộ chọn màu được sử dụng

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

Khi bộ chọn màu bị loại bỏ, cho biết rằng giá trị sẽ không thay đổi nữa (trừ khi người dùng mở lại bộ chọn màu), một sự kiện

colorWell.select();

5 được gửi đến phần tử. Chúng tôi xử lý sự kiện đó bằng hàm

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

8, sử dụng để lấy màu được chọn cuối cùng

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

Điều này đặt màu của mỗi khối

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

5 sao cho thuộc tính color của nó khớp với giá trị hiện tại của đầu vào màu, giá trị này được gọi bằng cách sử dụng

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

8

Làm cách nào để thay đổi màu của trường văn bản trong js?

Thuộc tính giá trị màu đầu vào .

Thay đổi màu của bộ chọn màu. getElementById("myColor"). giá trị = "#FF8040";

Lấy màu của bộ chọn màu. getElementById("myColor"). giá trị;

Một ví dụ cho thấy sự khác biệt giữa thuộc tính defaultValue và value. getElementById("myColor"); . giá trị mặc định;

Làm cách nào để thay đổi màu nền của trường trong JavaScript?

Để thay đổi màu nền bằng javascript, bạn có thể áp dụng kiểu. nền hoặc phong cách. màu nền của thành phần bạn muốn thay đổi nền cho . Ví dụ dưới đây thay đổi màu nền của phần thân khi bạn nhấp vào một phần tử bằng cách sử dụng kiểu.

Làm cách nào để thay đổi màu giá trị trong JavaScript?

getElementById("id"). kiểu. color = "color"; “id” là id của phần tử được chỉ định để truy cập phần tử văn bản và sau đó thay đổi màu của phần tử đó bằng cách sử dụng kiểu.

programming javascript