OK, bây giờ các bạn đã biết cách thay đổi nội dung phần tử

và giá trị thuộc tính của nó.

Còn gì nữa nhỉ? Nếu ta muốn thay đổi style thì sao?

Thông thường, ta sẽ thực hiện trong CSS, nhưng có những lúc ta muốn

thực hiện trong JavaScript, ví dụ khi ta muốn hoạt họa style theo thời gian hoặc

thay đổi style sau khi người sử dụng click vào gì đó, tôi hứa các bạn sẽ được học sớm thôi.

Ta cùng thay đổi style tiêu đề nhé.

Nếu làm với CSS, ta sẽ làm như sau—

`#heading` để chọn theo ID, sau đó ta nhập `color: orange`.

Tada, nó màu vàng rồi, y như con mèo.

Bây giờ, nếu làm với JavaScript,

trước hết ta tìm phần tử tiêu đề, có sẵn ở đâu rồi.

Sau đó ta sẽ truy cập thuộc tính style với `.style`.

Tiếp theo ta truy cập tính chất mà mình quan tâm-- `color`--

và đặt nó bằng một giá trị mới.

Ta sẽ xóa tính chất đó trong CSS để xem có hoạt động không. Thành công rồi.

Bây giờ hãy chú ý ở dưới đây ta có 2 chấm vì ta đang truy cập

2 đối tượng. Một trong số đó là đối tượng phần tử và cái còn lại là đối tượng style

chứa tất cả các style của phần tử đó dưới dạng nhiều tính chất khác nhau.

Nếu ta muốn thay đổi cả màu nền cho tiêu đề thì sao?

Trong CSS ta sẽ sử dụng `background-color: black;`

Ta cùng thử trong JavaScript nhé. Ta nhập

`headingEl.style.background-color = "black";`

Uh oh, có lỗi rồi. Đây lại là JavaScript không hợp lệ,

vì tên tính chất không được chứa dấu gạch ngang.

Thay vào đó ta phải chuyển tên tính chất CSS này thành một định dạng JavaScript

hợp lệ, tức ta áp dụng camel-casing. Xóa dấu gạch ngang và viết hoa chữ “c”.

Ta sẽ kiểm tra bằng cách xóa tính chất này đi, , vâng, vẫn là màu đen.

Bây giờ tôi sẽ làm màu một chút, tôi muốn căn chỉnh tiêu đề vào giữa.

Vậy tôi sẽ thêm một dòng ở dưới đây.

`headingEI.style.textAlign`-- áp dụng camel-case-- `= “center”`.

Ta lại áp dụng camel-case vì đó là 2 từ có dấu gạch ngang,

và giờ thì ta đã có một tiêu đề vừa giống mèo vừa giống Halloween rồi. Yay.