Hướng dẫn này trình bày chi tiết về mục tiêu và hoạt động của thuộc tính “kiểu” Phần tử DOM HTML trong JavaScript.
Thuộc tính “kiểu” Phần tử DOM HTML hoạt động như thế nào trong JavaScript?
HTML DOM “ phong cách ” là thuộc tính chỉ đọc hoạt động dựa trên thuộc tính kiểu dáng được phân bổ tương ứng. Ngoài ra, nó trả về “ CSSStyleKhai báo ” đối tượng chứa tất cả các thuộc tính kiểu nội tuyến của phần tử HTML cụ thể.
Ghi chú: Đối tượng “CSSStyleDeclaration” có chứa các thuộc tính kiểu dáng CSS được xác định trong phần đầu.
Cú pháp (Đặt thuộc tính kiểu)
yếu tố. phong cách . tài sản = giá trịTheo cú pháp trên, “ phong cách ” thuộc tính chỉ hỗ trợ một tham số “ giá trị ” đại diện cho giá trị của thuộc tính kiểu dáng được chỉ định.
Cú pháp (Trả về thuộc tính kiểu)
yếu tố. phong cách . tài sảnThực tế, hãy triển khai các cú pháp đã thảo luận ở trên của thuộc tính 'kiểu'.
Ví dụ 1: Sử dụng thuộc tính “style” để đặt màu cho một phần tử HTML cụ thể
Ví dụ này áp dụng cú pháp cơ bản của “ phong cách ” để đặt giá trị của thuộc tính “style” sao cho màu của phần tử HTML cụ thể bị thay đổi.
Mã HTML
Đầu tiên, đi qua mã HTML đã cho:
< h2 > Sử dụng Thuộc tính kiểu trong JavaScript h2 >
< mã h3 = 'H3' > Phân nhóm thứ hai. h3 >
Trong các dòng mã trên:
- Các ' ” Thẻ HTML chỉ định tiêu đề phụ đầu tiên.
- Các ' ” tạo tiêu đề phụ thứ hai của cấp 3 với id được gán là “H3”.
Mã JavaScript
Tiếp theo, hãy làm theo mã JavaScript đã nêu:
< kịch bản >tài liệu. getElementById ( 'H3' ) . phong cách . màu sắc = 'màu xanh lá' ;
kịch bản >
Trong đoạn mã trên, “ tài liệu.getElementById() ” phương thức truy cập vào “ ” phần tử thông qua id của nó “ H3 ” để thiết lập “ màu sắc ” giá trị thuộc tính của phần tử thông qua “ style.color ' tài sản.
đầu ra
Đầu ra cho thấy rằng biểu diễn trực quan của phần tử HTML được nhắm mục tiêu được đặt tương ứng bằng cách sử dụng thuộc tính “kiểu”.
Ví dụ 2: Sử dụng Thuộc tính “style” để lấy Giá trị của Thuộc tính “style” được áp dụng
Trong ví dụ này, thuộc tính “kiểu” giúp tìm ra thuộc tính “kiểu” được chỉ định của phần tử HTML bằng cách sử dụng cú pháp tổng quát của nó (Trả về thuộc tính kiểu).
Mã HTML
Mã HTML được nêu ở đây:
< h2 > Sử dụng Thuộc tính kiểu trong JavaScript h2 >< mã h3 = 'H3' phong cách = 'màu nền: cam;' > Giá trị của màu nền phân nhóm thứ hai là : h3 >
< mã h4 = 'thử nghiệm' > h4 >
Trong mã này:
- Các ' ” Thẻ HTML sử dụng thuộc tính “style” đặt màu nền cho phần tử HTML “
”.
- Các ' ” thẻ tạo tiêu đề con trống cấp 4 có id “ thử nghiệm ”.
Mã JavaScript
Bây giờ, hãy xem mã JavaScript đã cho:
< kịch bản >hằng số giá trị = tài liệu. getElementById ( 'H3' ) . phong cách . màu nền ;
tài liệu. getElementById ( 'thử nghiệm' ) . bên trongHTML = giá trị ;
kịch bản >
Trong mã được viết ở trên:
- biến “ giá trị ” được khai báo với một “ hằng số ” từ khóa áp dụng “ tài liệu.getElementById() ” để tìm nạp phần tử “
” bằng cách sử dụng id của nó để lấy giá trị của thuộc tính “kiểu” được áp dụng và áp dụng nó cho phần tử, tức là “
” thông qua thuộc tính “kiểu”.
- Phương thức “document.getElementById()” được sử dụng lại để truy cập phần tử “
” trống đã thêm và hiển thị giá trị của thuộc tính “kiểu” được phân bổ đối với phần tử HTML đã tìm nạp và nối nó dưới dạng tiêu đề phụ thông qua “ bên trongHTML ' tài sản.
đầu ra
Đầu ra áp dụng màu nền cho thành phần và giá trị của thuộc tính “kiểu” đã đặt cũng được trả về tương ứng.
Phần kết luận
JavaScript sử dụng “ phong cách ” để gán và trả về thuộc tính “kiểu” nội tuyến của phần tử HTML DOM. Nó yêu cầu một “giá trị” bổ sung để áp dụng chức năng mong muốn tương ứng. Ngoài việc thiết lập và truy xuất, việc thay đổi thuộc tính “kiểu” hiện có cũng rất hữu ích. Hướng dẫn này trình bày mục tiêu chính, hoạt động và triển khai thực tế của Thuộc tính kiểu phần tử HTML DOM.