Nhận kiểu của phần tử JavaScript
Tóm lược. trong hướng dẫn này, bạn sẽ học cách thêm kiểu vào phần tử bằng các phương thức DOM của JavaScript Show Giả sử rằng bạn có một phần tử 4 như sau
Và bạn muốn thêm phong cách cho phần tử này. Bằng cách sử dụng các phương thức JavaScript DOM, bạn có thể thêm kiểu nội tuyến hoặc kiểu toàn cục vào phần tử kiểu nội tuyếnĐể thêm kiểu nội tuyến vào một phần tử, bạn làm theo các bước sau
Đoạn mã sau thay đổi màu nền và màu của phần tử 4 ở trên
1) Sử dụng thuộc tính cssTextThêm phong cách cá nhân là khá dài dòng. May mắn thay, bạn có thể thêm tập hợp nhiều kiểu cùng một lúc bằng cách sử dụng thuộc tính 2
Trong ví dụ này, chúng tôi đã sử dụng toán tử 3 để nối các kiểu mới vào các kiểu hiện có. Nếu bạn sử dụng toán tử 4, kiểu hiện tại sẽ bị xóa, như thế này
2) Sử dụng chức năng trợ giúpHàm trợ giúp sau chấp nhận một phần tử và một đối tượng kiểu. Nó thêm tất cả các kiểu từ đối tượng 0 vào thuộc tính 0 của 7 1 Và bạn có thể sử dụng hàm trợ giúp 8 này để đặt kiểu cho phần tử 4 như sau 3 phong cách toàn cầuĐể thêm các kiểu toàn cầu vào một phần tử, bạn tạo phần tử kiểu, điền vào đó các quy tắc CSS và nối phần tử kiểu vào cây DOM, như thế này Làm cách nào để có kiểu phần tử trong JavaScript?Đầu tiên, bạn cần chọn phần tử bằng querySelector. Sau đó, bạn sử dụng getComputedStyle để lấy kiểu của phần tử . Nếu bạn ghi nhật ký style , bạn sẽ thấy một đối tượng chứa mọi thuộc tính CSS và các giá trị tương ứng của chúng. Bạn cũng có thể thấy đối tượng này trong devtools của Chrome và Firefox.
Làm cách nào để có được kiểu phần tử CSS trong JavaScript?Có thể lấy CSS của một phần tử bằng cách sử dụng hàm phần tử getComputingStyle trong JavaScript. Nó trả về một đối tượng JavaScript chứa các thuộc tính CSS và giá trị của chúng. Đối tượng này được lập chỉ mục và có thể lặp lại qua tên thuộc tính. getPropertyValue(property) được sử dụng để lấy giá trị của một thuộc tính.
Làm cách nào để có kiểu nội tuyến bằng JavaScript?Để đặt kiểu nội tuyến của phần tử, bạn sử dụng thuộc tính kiểu của phần tử đó. . thành phần. Phong cách. . thành phần. Phong cách. màu = 'đỏ';. thành phần. Phong cách. ['-webkit-text-stock'] = 'không đặt';. thành phần. Phong cách. cssText = 'màu. màu đỏ; màu nền. màu vàng';. thành phần. setAttribute('kiểu','màu. màu đỏ; màu nền. màu vàng'); Phong cách của phần tử là gì?Phần tử chứa thông tin về kiểu của tài liệu hoặc một phần của tài liệu . Nó chứa CSS, được áp dụng cho nội dung của tài liệu chứa phần tử |