[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:04.04,Default,,0000,0000,0000,,OK, bây giờ các bạn đã biết cách thay đổi nội dung phần tử
Dialogue: 0,0:00:04.05,0:00:06.44,Default,,0000,0000,0000,,và giá trị thuộc tính của nó.
Dialogue: 0,0:00:06.44,0:00:11.38,Default,,0000,0000,0000,,Còn gì nữa nhỉ? Nếu ta muốn thay đổi style thì sao?
Dialogue: 0,0:00:11.38,0:00:15.53,Default,,0000,0000,0000,,Thông thường, ta sẽ thực hiện trong CSS, nhưng có những lúc ta muốn
Dialogue: 0,0:00:15.53,0:00:20.43,Default,,0000,0000,0000,,thực hiện trong JavaScript, ví dụ khi ta muốn hoạt họa style theo thời gian hoặc
Dialogue: 0,0:00:20.43,0:00:25.94,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:25.94,0:00:29.75,Default,,0000,0000,0000,,Ta cùng thay đổi style tiêu đề nhé.
Dialogue: 0,0:00:29.75,0:00:33.42,Default,,0000,0000,0000,,Nếu làm với CSS, ta sẽ làm như sau—
Dialogue: 0,0:00:33.42,0:00:38.55,Default,,0000,0000,0000,,`#heading` để chọn theo ID, sau đó ta nhập `color: orange`.
Dialogue: 0,0:00:38.55,0:00:42.48,Default,,0000,0000,0000,,Tada, nó màu vàng rồi, y như con mèo.
Dialogue: 0,0:00:42.48,0:00:46.04,Default,,0000,0000,0000,,Bây giờ, nếu làm với JavaScript,
Dialogue: 0,0:00:46.04,0:00:49.93,Default,,0000,0000,0000,,trước hết ta tìm phần tử tiêu đề, có sẵn ở đâu rồi.
Dialogue: 0,0:00:49.93,0:00:55.66,Default,,0000,0000,0000,,Sau đó ta sẽ truy cập thuộc tính style với `.style`.
Dialogue: 0,0:00:55.66,0:01:00.92,Default,,0000,0000,0000,,Tiếp theo ta truy cập tính chất mà mình quan tâm-- `color`--
Dialogue: 0,0:01:00.92,0:01:04.62,Default,,0000,0000,0000,,và đặt nó bằng một giá trị mới.
Dialogue: 0,0:01:04.62,0:01:11.34,Default,,0000,0000,0000,,Ta sẽ xóa tính chất đó trong CSS để xem có hoạt động không. Thành công rồi.
Dialogue: 0,0:01:11.34,0:01:16.62,Default,,0000,0000,0000,,Bây giờ hãy chú ý ở dưới đây ta có 2 chấm vì ta đang truy cập
Dialogue: 0,0:01:16.62,0:01:22.12,Default,,0000,0000,0000,,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
Dialogue: 0,0:01:22.12,0:01:27.00,Default,,0000,0000,0000,,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.
Dialogue: 0,0:01:27.00,0:01:31.63,Default,,0000,0000,0000,,Nếu ta muốn thay đổi cả màu nền cho tiêu đề thì sao?
Dialogue: 0,0:01:31.63,0:01:37.55,Default,,0000,0000,0000,,Trong CSS ta sẽ sử dụng `background-color: black;`
Dialogue: 0,0:01:37.55,0:01:40.100,Default,,0000,0000,0000,,Ta cùng thử trong JavaScript nhé. Ta nhập
Dialogue: 0,0:01:40.100,0:01:49.38,Default,,0000,0000,0000,,`headingEl.style.background-color = "black";`
Dialogue: 0,0:01:49.38,0:01:53.98,Default,,0000,0000,0000,,Uh oh, có lỗi rồi. Đây lại là JavaScript không hợp lệ,
Dialogue: 0,0:01:53.98,0:01:57.41,Default,,0000,0000,0000,,vì tên tính chất không được chứa dấu gạch ngang.
Dialogue: 0,0:01:57.41,0:02:02.37,Default,,0000,0000,0000,,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
Dialogue: 0,0:02:02.37,0:02:11.10,Default,,0000,0000,0000,,hợp lệ, tức ta áp dụng camel-casing. Xóa dấu gạch ngang và viết hoa chữ “c”.
Dialogue: 0,0:02:11.10,0:02:16.97,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:16.97,0:02:21.84,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:21.84,0:02:26.91,Default,,0000,0000,0000,,Vậy tôi sẽ thêm một dòng ở dưới đây.
Dialogue: 0,0:02:26.91,0:02:33.79,Default,,0000,0000,0000,,`headingEI.style.textAlign`-- áp dụng camel-case-- `= “center”`.
Dialogue: 0,0:02:33.79,0:02:37.92,Default,,0000,0000,0000,,Ta lại áp dụng camel-case vì đó là 2 từ có dấu gạch ngang,
Dialogue: 0,0:02:37.92,0:00:00.00,Default,,0000,0000,0000,,và giờ thì ta đã có một tiêu đề vừa giống mèo vừa giống Halloween rồi. Yay.