1
00:00:00,000 --> 00:00:04,040
OK, bây giờ các bạn đã biết cách thay đổi nội dung phần tử

2
00:00:04,051 --> 00:00:06,441
và giá trị thuộc tính của nó.

3
00:00:06,441 --> 00:00:11,383
Còn gì nữa nhỉ? Nếu ta muốn thay đổi style thì sao?

4
00:00:11,383 --> 00: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

5
00:00:15,534 --> 00: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

6
00:00:20,432 --> 00: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.

7
00:00:25,944 --> 00:00:29,747
Ta cùng thay đổi style tiêu đề nhé.

8
00:00:29,747 --> 00:00:33,415
Nếu làm với CSS, ta sẽ làm như sau—

9
00:00:33,415 --> 00:00:38,549
`#heading` để chọn theo ID, sau đó ta nhập `color: orange`.

10
00:00:38,549 --> 00:00:42,476
Tada, nó màu vàng rồi, y như con mèo.

11
00:00:42,476 --> 00:00:46,036
Bây giờ, nếu làm với JavaScript,

12
00:00:46,036 --> 00:00:49,932
trước hết ta tìm phần tử tiêu đề, có sẵn ở đâu rồi.

13
00:00:49,932 --> 00:00:55,655
Sau đó ta sẽ truy cập thuộc tính style với `.style`.

14
00:00:55,655 --> 00:01:00,916
Tiếp theo ta truy cập tính chất mà mình quan tâm-- `color`--

15
00:01:00,916 --> 00:01:04,617
và đặt nó bằng một giá trị mới.

16
00:01:04,617 --> 00: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.

17
00:01:11,345 --> 00:01:16,618
Bây giờ hãy chú ý ở dưới đây ta có 2 chấm vì ta đang truy cập

18
00:01:16,618 --> 00: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

19
00:01:22,122 --> 00: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.

20
00:01:27,004 --> 00:01:31,632
Nếu ta muốn thay đổi cả màu nền cho tiêu đề thì sao?

21
00:01:31,632 --> 00:01:37,548
Trong CSS ta sẽ sử dụng `background-color: black;`

22
00:01:37,548 --> 00:01:40,996
Ta cùng thử trong JavaScript nhé. Ta nhập

23
00:01:40,996 --> 00:01:49,378
`headingEl.style.background-color = "black";`

24
00:01:49,378 --> 00:01:53,977
Uh oh, có lỗi rồi. Đây lại là JavaScript không hợp lệ,

25
00:01:53,977 --> 00:01:57,412
vì tên tính chất không được chứa dấu gạch ngang.

26
00:01:57,412 --> 00: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

27
00:02:02,372 --> 00: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”.

28
00:02:11,104 --> 00: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.

29
00:02:16,969 --> 00: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.

30
00:02:21,838 --> 00:02:26,910
Vậy tôi sẽ thêm một dòng ở dưới đây.

31
00:02:26,910 --> 00:02:33,790
`headingEI.style.textAlign`-- áp dụng camel-case-- `= “center”`.

32
00:02:33,790 --> 00:02:37,916
Ta lại áp dụng camel-case vì đó là 2 từ có dấu gạch ngang,

33
00:02:37,916 --> 00: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.