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

0:00:04.051,0:00:06.441
và giá trị thuộc tính của nó.

0:00:06.441,0:00:11.383
Còn gì nữa nhỉ? Nếu ta muốn thay đổi style thì sao?

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

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

0:00:20.432,0:00:25.944
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.

0:00:25.944,0:00:29.747
Ta cùng thay đổi style tiêu đề nhé.

0:00:29.747,0:00:33.415
Nếu làm với CSS, ta sẽ làm như sau—

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

0:00:38.549,0:00:42.476
Tada, nó màu vàng rồi, y như con mèo.

0:00:42.476,0:00:46.036
Bây giờ, nếu làm với JavaScript,

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

0:00:49.932,0:00:55.655
Sau đó ta sẽ truy cập thuộc tính style với `.style`.

0:00:55.655,0:01:00.916
Tiếp theo ta truy cập tính chất mà mình quan tâm-- `color`--

0:01:00.916,0:01:04.617
và đặt nó bằng một giá trị mới.

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

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

0:01:16.618,0:01:22.122
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

0:01:22.122,0:01:27.004
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.

0:01:27.004,0:01:31.632
Nếu ta muốn thay đổi cả màu nền cho tiêu đề thì sao?

0:01:31.632,0:01:37.548
Trong CSS ta sẽ sử dụng `background-color: black;`

0:01:37.548,0:01:40.996
Ta cùng thử trong JavaScript nhé. Ta nhập

0:01:40.996,0:01:49.378
`headingEl.style.background-color = "black";`

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

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

0:01:57.412,0:02:02.372
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

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

0:02:11.104,0:02:16.969
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.

0:02:16.969,0:02:21.838
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.

0:02:21.838,0:02:26.910
Vậy tôi sẽ thêm một dòng ở dưới đây.

0:02:26.910,0:02:33.790
`headingEI.style.textAlign`-- áp dụng camel-case-- `= “center”`.

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

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