Mã JavaScript nền

Thuộc tính “backgroundColor” được sử dụng để trả về màu của phần tử đã chỉ định. Người dùng có thể truy cập phần tử HTML rồi áp dụng thuộc tính này để thay đổi màu nền. Cú pháp được đưa ra ở đây bằng cách chỉ định màu nền trong JavaScript

cú pháp

đối tượng. kiểu dáng . màu nền = "màu"

Trong cú pháp này, “color” đại diện cho giá trị của màu được gán cho thuộc tính “backgroundColor” của một đối tượng HTML

Ghi chú. Người dùng có thể chỉ định “màu” làm tên của màu, giá trị RGB hoặc mã màu hex

ví dụ 1. Thay đổi màu nền của khu vực được chỉ định trong JavaScript

Một ví dụ được điều chỉnh để thay đổi màu nền của một khu vực cụ thể. Mã ví dụ sau đề cập đến việc thay đổi màu nền của div có “id=txt”

Mã số

< html >

< cơ thể >< trung tâm >

< h2 > Ví dụ về thay đổi màu nền h2>

< div id ="txt">< Welcome to JavaScriptdiv>

< nút trênClick ="col()">Buttonbutton>

< loại tập lệnh ='văn bản/javascript'>

hàm col () {

var uCol = tài liệu. getElementById("txt");

uCol. kiểu dáng . màu nền='vàng';

}

tập lệnh>script>

cơ thể>trung tâm>< body>center>

html>html>

Trong mã này

• A specific area is allocated by
  tags and a message “Welcome to JavaScript” is written in it.
• Một “Nút” được đính kèm với phương thức “col()” được kích hoạt bằng cách nhấn vào nó
• Trong phương thức “col()”, tài liệu. getElementById trích xuất giá trị của phần tử div có “id=txt” và giá trị của nó được lưu trữ trong một biến có tên “uCol“
• Cuối cùng, “phong cách. thuộc tính backgroundColor” được sử dụng để thay đổi màu nền bằng cách gán “màu vàng”

đầu ra

Đầu ra cho thấy rằng bằng cách nhấn nút, màu nền của tin nhắn sẽ thay đổi

ví dụ 2. Thay đổi màu nền của toàn bộ trang trong JavaScript

Một ví dụ khác là thay đổi toàn bộ màu nền của trang web thành màu xanh lam bằng cách sử dụng mã hex #0000FF. Đoạn mã sau đề cập đến kịch bản đã nêu ở trên

Mã số

< html >

< nội dung >

< h1 > Chào mừng bạn đến với Linuxhint h1>

< loại nút ="nút" khi nhấp< ="myFun()">Change background colorbutton>

< tập lệnh >

function myFun () {

tài liệu. cơ thể . phong cách . màu nền = "#0000FF";

}

tập lệnh>script>

cơ thể>body>

html>html>

Mã này được thể hiện dưới dạng

• Nút “Thay đổi màu nền” được sử dụng, được liên kết với phương thức “myFun()”
• Trong “myFun()”, thuộc tính kiểu “backgroundColor” được đặt thành “#0000FF” dưới dạng mã hex
• Phương thức “myFun()” được kích hoạt trên “onclick” bằng cách nhấn nút

đầu ra

Đầu ra cho thấy màu nền được thay đổi từ trắng sang xanh lam bằng cách nhấn nút trong cửa sổ trình duyệt

Phần kết luận

Trong JavaScript, phong cách. thuộc tính backgroundColor được sử dụng để thay đổi màu nền. Giá trị màu có thể ở dạng RGB, mã hex hoặc tên của nó. Trong bài viết này, hai ví dụ được cung cấp để thay đổi màu nền theo tên và mã hex của một khu vực cụ thể cũng như toàn bộ trang. Thuộc tính backgroundColor hữu ích để thay đổi màu nền của tiêu đề, bảng hoặc bất kỳ thành phần nào được chỉ định

Trong JavaScript, có những trang web cần bố cục hấp dẫn, chẳng hạn như nền tối thường hoạt động tốt hơn cho giao diện. Tương tự, nền trắng cho phép người đọc tập trung vào nội dung và do đó, các cổng tin tức hoặc blog sử dụng nền tương đối sáng với văn bản tối. Trong những trường hợp như vậy, JavaScript trở nên rất tiện dụng trong việc định dạng và cải thiện thiết kế tài liệu

Bài viết này sẽ thảo luận về các phương pháp để thay đổi hình nền trong JavaScript

Làm cách nào để thay đổi hình nền trong JavaScript?

Để thay đổi hình nền trong JavaScript, có thể sử dụng các phương pháp sau

• thuộc tính “backgroundImage” trên “DOM”
• Phương thức “getElementById()” và thuộc tính “backgroundImage” trên “paragraph”

Lần lượt đi qua các phương pháp đã thảo luận

Phương pháp 1. Thay đổi hình nền trong JavaScript bằng thuộc tính backgroundImage trên DOM

Thuộc tính “backgroundImage” điều chỉnh hình nền của phần tử được chỉ định. Kỹ thuật này có thể được áp dụng bằng cách áp dụng thuộc tính backgroundImage và chỉ định hình nền bằng cách định vị đường dẫn của nó làm đối số

cú pháp

Trong cú pháp trên, “URL” đề cập đến đường dẫn của hình ảnh

Nhìn vào ví dụ sau đây để chứng minh

Thí dụ

Trong ví dụ này, một nút sẽ được bao gồm với giá trị đã chỉ định và sự kiện “onclick” chuyển hướng đến một
chức năng có tên backgroundImage()

Bây giờ, một hàm “backgroundImage()” sẽ được khai báo và “document. cơ thể người. Phong cách. backgroundImage” sẽ truy cập hình nền bằng cách sử dụng đường dẫn hình ảnh được chỉ định trong đối số của nó

Đầu ra của việc thực hiện trên sẽ có kết quả như sau

Phương pháp 2. Thay đổi hình nền trong JavaScript bằng phương thức getElementById() và thuộc tính backgroundImage trên đoạn văn

Phương thức “getElementById()” trả về một phần tử có giá trị đã chỉ định và thuộc tính “backgroundImage”, như đã nêu ở trên, trả về hình nền của phần tử cụ thể được chỉ định trong đối số của nó. Phương pháp này có thể được áp dụng để ánh xạ màu được chỉ định trên nền của đoạn văn cụ thể

cú pháp

Ở đây, “elementID” đề cập đến id của một phần tử

Xem qua ví dụ sau để hiểu rõ hơn về khái niệm đã nêu

Thí dụ

First, include a paragraph in the

tag and assign it a specific id:

Tiếp theo, tạo một nút có sự kiện onclick truy cập vào hàm backgroundImage() như đã thảo luận trong phương pháp trước

Cuối cùng, khai báo hàm có tên “backgroundImage()” tương tự. Tại đây, truy cập Id đã xác định bằng phương thức “getElementById()” và áp dụng hình nền đã chỉ định trên đó. Điều này sẽ dẫn đến việc triển khai màu trên nền của đoạn văn

đầu ra

Chúng tôi đã biên soạn phương pháp dễ nhất để thay đổi hình nền trong Javascript

Phần kết luận

Để thay đổi hình nền trong Javascript, hãy áp dụng thuộc tính “backgroundImage” trên “DOM” để áp dụng hình nền đã chỉ định trên toàn bộ trang web bằng một hàm hoặc bằng cách lấy id cụ thể bằng phương thức  “getElementById()” và áp dụng thuộc tính “backgroundImage” . Blog này minh họa các phương pháp thay đổi hình nền trong JavaScript

Làm cách nào để tạo một JavaScript nền?

Làm cách nào để lấy màu nền bằng JavaScript?

Mã cho màu nền là gì?

Làm cách nào để sử dụng js để đặt hình nền?