1. Cách truy cập đối tượng Style
Mỗi phần tử HTML đều có một thuộc tính `style`. Bạn có thể thay đổi các thuộc tính CSS bằng cách gọi tên thuộc tính đó từ đối tượng style.
⚠️ Quy tắc quan trọng: Các thuộc tính CSS có dấu gạch ngang (như `background-color`) sẽ được viết theo dạng CamelCase trong JavaScript (biến thành `backgroundColor`).
const box = document.getElementById("myBox");
box.style.backgroundColor = "blue"; // background-color -> backgroundColor
box.style.marginTop = "20px"; // margin-top -> marginTop—
2. Các nhóm thuộc tính Style phổ biến
2.1. Nền và Màu sắc (Background & Color)
- `backgroundColor`: Màu nền.
- `backgroundImage`: Ảnh nền.
- `color`: Màu chữ.
- `opacity`: Độ trong suốt.
2.2. Kích thước và Khoảng cách (Layout)
- `width` / `height`: Chiều rộng và cao.
- `margin` / `padding`: Các khoảng cách lề.
- `display`: Cách hiển thị (none, block, flex…).
- `visibility`: Ẩn hoặc hiện phần tử.
2.3. Vị trí và Viền (Positioning & Borders)
- `position`: Cách định vị (absolute, relative…).
- `top` / `left` / `right` / `bottom`: Tọa độ vị trí.
- `border`: Cấu hình viền tổng quát.
- `borderRadius`: Bo góc.
—
3. Thao tác với nhiều Style cùng lúc
Nếu bạn muốn thiết lập nhiều thuộc tính cùng lúc bằng một chuỗi văn bản, hãy dùng `cssText`:
element.style.cssText = "color: red; background-color: yellow; font-size: 20px;";—
4. Lấy Style thực tế (Computed Style)
Thuộc tính `element.style` chỉ lấy được các style Inline (viết trực tiếp trong thẻ). Để lấy được style thực tế mà trình duyệt đang áp dụng (từ file CSS bên ngoài), bạn phải dùng:
const realStyle = window.getComputedStyle(element);
console.log(realStyle.color);—
Lời kết Tập 17
Điều khiển Style bằng JavaScript là kỹ năng biến bạn từ một người làm web tĩnh thành một nhà phát triển ứng dụng web chuyên nghiệp. Trong Tập 18 – tập cuối cùng của Series DOM, chúng ta sẽ khám phá Console & Collection Reference để hoàn thiện bộ kỹ năng tra cứu.
Hẹn gặp lại các bạn!
Leave a comment