Thay đổi CSS bằng JavaScript - núm vú

Cũng như bạn có thể sử dụng JavaScript để thay đổi HTML trong trang web, bạn cũng có thể sử dụng nó để thay đổi các kiểu CSS. Quá trình này rất giống nhau.

Bước đầu tiên là chọn phần tử bạn muốn áp dụng hoặc thay đổi kiểu trên. Ví dụ: để chọn mắt trái của robot, bạn có thể sử dụng mã sau:

tài liệu. getElementById ("lefteye")

Sau khi bạn đã chọn một phần tử, bạn có thể thay đổi kiểu của nó bằng cách gắn thuộc tính kiểu này vào bộ chọn, theo sau là kiểu bạn muốn thay đổi. Để thay đổi màu mắt trái, bạn có thể sử dụng JavaScript này:

tài liệu. getElementById ("lefteye"). Phong cách. backgroundColor = "tím";

Bạn có nhận thấy bất cứ điều gì kỳ lạ về mã này? Khi thay đổi kiểu bằng JavaScript, có hai quy tắc:

• Khi thuộc tính CSS chỉ là một từ, chẳng hạn như lề hoặc đường viền, bạn có thể sử dụng cùng một tên CSS để thay đổi kiểu trong JavaScript.

• Nếu thuộc tính CSS có dấu gạch ngang (-), tên thuộc tính CSS sẽ được chuyển thành camelCase. Vì vậy, background-color được thay đổi thành backgroundColor.

thuộc tính CSS

Tính năng của kiểu JavaScript	nền màu
backgroundColor	border-radius
borderRadius	font-family
fontFamily	lề
lề	font-size
fontSize	border-width
borderWidth	text- align
textAlign	màu
màu

JavaScript quan tâm nhiều đến việc viết hoa. Các chữ in hoa trong thuộc tính kiểu JavaScript cần phải có ở đó để các thuộc tính hoạt động.