Ví dụ

Đặt màu nền cho tài liệu

tài liệu. thân thể. Phong cách. nềnColor = "đỏ";

Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

---

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

Thuộc tính backgroundColor đặt hoặc trả về màu nền của phần tử

---

cú pháp

Trả về thuộc tính backgroundColor

vật. Phong cách. màu nền

Đặt thuộc tính backgroundColor

vật. Phong cách. nềnColor = "màu. trong suốt. ban đầu. thừa kế"

Giá trị tài sản

ValueDescriptioncolorChỉ định màu nền. Xem Giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có trong suốtDefault. Màu nền trong suốt (nội dung bên dưới sẽ tỏa sáng)initialĐặ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. minh bạch Giá trị trả về. Một Chuỗi, đại diện cho màu nền Phiên bản CSS SS1

---

---

Hỗ trợ trình duyệt

backgroundColor là một tính năng CSS1 (1996)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCóCó

---

Thêm ví dụ

Ví dụ

Đặt màu nền của một cụ thể

thành phần

tài liệu. getElementById("myDiv"). Phong cách. backgroundColor = "màu xanh nhạt";

Tự mình thử »

Ví dụ

Trả lại màu nền của một cụ thể

thành phần

để màu = tài liệu. getElementById("myDiv"). Phong cách. màu nền;

Tự mình thử »

Ví dụ

Trả lại màu nền của tài liệu

để màu = tài liệu. thân thể. Phong cách. màu nền;

Tự mình thử »

Nút là một yếu tố có thể nhấp được sử dụng để thực hiện một hành động cụ thể. Sử dụng CSS, bạn có thể đặt các kiểu nút khác nhau, một trong số đó là thay đổi màu của nút khi nhấp. Màu của nút có thể được đặt bằng cách sử dụng CSS “. lớp giả đang hoạt động

Blog này sẽ hướng dẫn bạn quy trình liên quan đến việc thay đổi màu nút khi nhấp chuột. Để làm được điều này, trước hết hãy tìm hiểu về. lớp giả tích cực

Vì vậy, hãy bắt đầu

Là gì ". đang hoạt động” trong CSS?

Có thể thay đổi màu nút khi nhấp chuột trong CSS với sự trợ giúp của “. lớp giả đang hoạt động. Trong HTML, nó cho biết một phần tử đang được kích hoạt khi người dùng nhấp vào nó. Hơn nữa, khi sử dụng chuột, quá trình kích hoạt sẽ bắt đầu khi nhấn phím chuột

cú pháp

a . hoạt động {

màu. xanh lá cây;

}

“a” đề cập đến phần tử HTML mà trên đó. lớp tích cực sẽ được áp dụng

Hãy hướng tới một ví dụ để hiểu khái niệm đã nêu

Làm cách nào để thay đổi màu nút khi nhấp trong CSS?

Để thay đổi màu của một nút khi nhấp, trước tiên, hãy tạo một nút trong tệp HTML và gán tên lớp là “btn”

HTML

< body >

< nút class="btn">Button</button>

</body>

Tiếp theo, trong CSS, đặt màu của nút. Để làm như vậy, chúng tôi sẽ sử dụng “. btn” để truy cập nút và đặt màu của nút là “rgb(0, 255, 213)”

CSS

.btn{

màu nền. rgb(0, 255, 213);

}

Sau đó, áp dụng. lớp giả đang hoạt động trên nút là “. btn. đang hoạt động” và đặt màu của nút sẽ hiển thị ở trạng thái hoạt động là “rgb(123, 180, 17)”

.btn. hoạt động{

màu nền. rgb(123, 180, 17);

}

Điều này sẽ hiển thị kết quả sau

Now, let’s add the heading with

tag and button class name “button”, inside the tag.

HTML

< trung tâm >

< h1>Change button color</h1>

<button class="button">Click Me</button>

</center>

Tiếp theo, chúng ta sẽ chuyển sang CSS và tạo kiểu cho nút và áp dụng. hoạt động trên đó. Để làm như vậy, chúng tôi sẽ đặt kiểu đường viền là “none” và đặt phần đệm là “15px”. Sau đó, đặt màu của văn bản nút là “rgb(50, 0, 54)” và nền của nó là “rgb(177, 110, 149)” và bán kính của nó là “15px”

.button{

đường viền. không có;

đệm. 15px;

màu sắc. rgb(50, 0 . , 54);

background-color: rgb(177, 110 . , 149);

border-radius: 15px;

}

Điều này sẽ hiển thị kết quả sau

Sau đó, chúng tôi sẽ áp dụng. lớp giả đang hoạt động trên nút là “. cái nút. active” và đặt màu của nút là “rgb(200, 255, 0)”

.button. hoạt động{

màu nền. rgb(200, 255, 0);

}

Khi bạn triển khai tất cả các mã trên, hãy chuyển đến tệp HTML và thực thi nó để kiểm tra kết quả

Từ đầu ra, có thể quan sát thấy khi nhấp vào nút, màu của nó được thay đổi theo mã màu RGB được chỉ định

Phần kết luận

Để thay đổi màu của nút khi nhấp chuột trong CSS, nút “. có thể sử dụng lớp giả đang hoạt động. Cụ thể hơn, nó có thể đại diện cho phần tử nút khi nó được kích hoạt. Sử dụng lớp này, bạn có thể đặt các màu nút khác nhau khi nhấp chuột vào nó. Bài viết này giải thích quy trình thay đổi màu nút khi nhấp chuột trong CSS

Làm cách nào để thay đổi màu sau khi nhấp vào CSS?

Để thay đổi màu của nút khi nhấp trong CSS, nút “. có thể sử dụng lớp giả đang hoạt động . Cụ thể hơn, nó có thể đại diện cho phần tử nút khi nó được kích hoạt. Sử dụng lớp này, bạn có thể đặt các màu nút khác nhau khi nhấp chuột vào nó.

Làm cách nào để thay đổi màu nền của nút bằng js?

Trong ví dụ này, chúng ta sẽ thảo luận về cách chúng ta thay đổi Màu nền của Nút bằng JavaScript. .

chức năng ChangeColor()

tài liệu. getElementById('btn1'). Phong cách. nềnColor = 'Đỏ';

setTimeout("ChangeColor2()", 2000);

hàm ChangeColor2()

Làm cách nào để tạo một nút thay đổi màu nền trong HTML?

Tất cả các thành phần kiểu dáng trong thẻ nút HTML của bạn phải được đặt trong dấu ngoặc kép. Nhập màu nền. trong dấu ngoặc kép sau "style=" . Phần tử này được sử dụng để thay đổi màu nền của nút. Nhập tên màu hoặc mã thập lục phân sau "background-color. ".

Làm cách nào để đặt màu di chuột trong CSS?

Để thay đổi màu của liên kết khi di chuột, hãy sử dụng. di chuột vào thuộc tính giả trên lớp của liên kết và đặt cho nó một màu khác .