Trong bài đăng này, chúng ta sẽ tìm hiểu cách thay đổi màu của văn bản trong JavaScript. Chúng tôi sẽ tạo một dự án html-css-js nhỏ, chỉ chứa một nút và nhấp vào nút đó sẽ thay đổi màu của văn bản
Chúng ta cần thay đổi thuộc tính màu của một thành phần. Trong ví dụ này, chúng tôi sẽ thay đổi màu của thành phần p hoặc đoạn văn
Tạo một chỉ mục. tệp html có nội dung bên dưới
Change Color in JS
Blue
Green
Red
Click the button to change the color.
Mở tệp này trong trình duyệt yêu thích của bạn. Nó sẽ hiển thị một dòng văn bản với ba nút như bên dưới
Bạn có thể thay đổi màu của nút bằng thuộc tính “màu nền” và đặt màu của nút theo sở thích của bạn. Về cơ bản, thuộc tính “background-color” được sử dụng để thêm màu nền cho các phần tử HTML
cú pháp
Cú pháp của thuộc tính màu nền như sau
Màu nền . giá trị
Ở vị trí của giá trị màu nền, bạn có thể đặt màu bạn muốn hiển thị phía sau các phần tử HTML
Bây giờ, hãy chuyển sang ví dụ thực tế, trong đó chúng ta sẽ thay đổi màu của nút
Thí dụ
Trước tiên, hãy tìm hiểu cách tạo một nút trong div và sau đó thay đổi màu của nó bằng CSS
Bước 1. Tạo Div và Nút
In HTML, we will create a div and assign the class name as “div”. Inside the tag, we will add a heading using the
tag and a button using the tag with the class name as “btn”. The text that will display on the button is “Color”.HTML
Có thể thấy rằng div và một nút được tạo Bây giờ, chúng ta sẽ chuyển sang bước tiếp theo để tạo kiểu cho div đã tạo bằng CSS Ở đây, sử dụng “. div” để truy cập vùng chứa đã tạo và đặt chiều cao của nó là “200px”. Sau đó, tạo kiểu cho div bằng cách sử dụng thuộc tính "đường viền" để đặt đường viền xung quanh div. Chiều rộng của đường viền được đặt là “4px”, kiểu của nó là “rãnh” và màu là “rgb[1, 34, 77]”. Chúng tôi sẽ đặt hình dạng của đường viền với thuộc tính “bán kính đường viền” và đặt giá trị của nó là “25px”. Sau đó, sử dụng thuộc tính “background-color” để đặt màu nền của div và gán giá trị của màu là “rgb[210, 243, 241]” .div{ Kết quả là vùng chứa đã tạo sẽ được tạo kiểu Hãy chuyển sang bước cuối cùng, trong đó chúng ta tô màu nút bằng CSS Sau khi tạo kiểu cho div trong CSS, chúng tôi sẽ sử dụng “. btn” để truy cập nút được tạo trong HTML. Sau đó, đặt giá trị của thuộc tính đường viền là “none” để xóa kiểu đường viền mặc định. Chỉ định giá trị thuộc tính bán kính đường viền là “15px” để đặt hình dạng của nút Tạo kiểu cho văn bản của nút bằng thuộc tính cỡ chữ và đặt giá trị của nó là “xx-large”. Sau đó, chúng tôi sẽ sử dụng phần đệm là “10px” để tạo khoảng cách giữa văn bản được thêm vào và đường viền của nút Cuối cùng, sử dụng thuộc tính color và đặt giá trị của nó là “rgb[255, 251, 7]” để tô màu cho văn bản và thuộc tính background-color là “rgb[43, 87, 84]” để đặt màu cho nút .btn{ Đầu ra đã cho cho biết rằng màu của nút được thay đổi thành công Chúng tôi đã giải thích phương pháp thay đổi màu của nút trong CSS Trong CSS, thuộc tính “background-color” được sử dụng để đặt màu cho nút. Sử dụng điều này, bạn có thể đặt màu theo lựa chọn của mình và thiết kế một nút trang nhã. Bạn cũng có thể sử dụng các thuộc tính khác nhau để cải thiện giao diện của nút bằng CSS. Trong hướng dẫn này, chúng tôi đã giải thích phương pháp thay đổi màu của nút trong CSS và cung cấp một ví dụ để bạn hiểu rõ hơn
>
Thay đổi màu của nút trong CSS>Change Button Color in CSS
< nút lớp ="btn"Color
>
>Bước 2. Div kiểu
CSS
chiều cao. 200px;
đường viền. 4px rãnh rgb[1, 34, 77];
bán kính đường viền. 25px;
màu nền. rgb[210, 243, 241];
}Bước 3. Thay đổi màu nút
đường viền. không;
bán kính đường viền. 15px;
cỡ chữ. xx-lớn;
phần đệm. 10px;
màu. rgb[255, 251, 7];
màu nền. rgb[43, 87, 84];
}Phần kết luận
Làm cách nào để thay đổi màu chữ trong HTML?
Làm cách nào để thay đổi màu của văn bản khi nhấp vào nút?
Chủ Đề