-
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.
