Xóa kiểu javascript
|
Giá trị mặc định. bình thường được kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS1JavaScript. sự vật. Phong cách. fontStyle="italic" Thử đi Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính Thuộc tính font-style1. 04. 01. 01. 07. 0 Cú pháp CSSkiểu chữ. thông thường. chữ nghiêng. xiên. ban đầu. thừa kế; Giá trị tài sảnGiá trịMô tảDemonormalTrình duyệt hiển thị kiểu phông chữ bình thường. Đây là mặc địnhDemo ❯italicTrình duyệt hiển thị kiểu phông chữ nghiêngDemo ❯obliqueTrình duyệt hiển thị kiểu phông chữ xiênDemo ❯initialĐặt thuộc tính này thành giá trị mặc định. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế Bất kể khi nào người dùng nhấp vào một trong các nút, nút này sẽ trở thành nút được chọn, được chọn. Tôi phát hiện ra rằng tôi cần thêm lớp CSS &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }1 vào nút tương ứng, nhưng tôi không chắc sẽ làm thế nào để thực hiện điều này Tôi đã từng nghĩ về điều này một chút. Tôi có chức năng &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }2 được kết nối với các nút của tôi, trong đó tôi làm một số thứ khác. Sau đó, tôi có thể điều khiển CSS không? Vì vậy, tôi đoán câu hỏi của tôi là người đầu tiên, làm thế nào để nhắm mục tiêu nút tiêu tôi cần nhắm mục tiêu và thứ hai, làm thế nào tôi có thể thay đổi CSS của nút đó bằng React Chào mừng trở lại khóa học. Trong video này, chúng tôi sẽ thêm một số phần đệm vào lề của chúng tôi và chúng tôi sẽ tạo kiểu cho mũi tên và tôi cũng sẽ làm cho nó đi lên phía dưới. Please started with the working type for lines Open out &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }3 và thêm các kiểu sau thư việnKhóa học. scss &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; } Bây giờ nếu chúng ta nhìn vào ứng dụng, chúng ta có thể thấy rằng bên dưới cùng hoạt động, nhưng không phải là biên độ cao nhất. Lý do cho điều này là khi nó nằm trên các hàng lưới sẽ không cho phép nó hoạt động. Vì vậy, hãy thay đổi điều đó thành &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }4  Điều đó sẽ cho nhiều không gian. Chúng ta có thể thấy rằng cả bên trên và bên dưới đều hoạt động. Vui lòng chuyển sang tên của chúng tôi. Điều này khá đơn giản, tất cả những gì chúng ta phải làm là thay đổi màu sắc và làm cho nó nhỏ hơn một chút. Open &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }5 của tôi và chúng tôi hãy thay đổi nó thành ___06 trên các kích thước mũi tên. scss .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; } Bây giờ chúng ta hãy làm cho nó hoạt động bằng cách làm cho nó quay lại và ẩn mô tả. Đây sẽ là phần lớn của video này. Chúng tôi sẽ làm việc với JavaScript, không chỉ các kiểu, mà chúng tôi sẽ thêm các lớp vào mô tả để ẩn nó Chúng ta cần tìm ra cách chúng ta có thể làm điều này, chúng ta hãy đi đến thiết kế của chúng ta và chỉ xem cách mà các mũi tên chỉ là ban đầu Vì vậy, có vẻ như các mũi tên đang chỉ xuống đầu cấm và được đóng lại, vì vậy chúng tôi cần phải đóng lại của chúng tôi khi đóng. Update &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }5 your up this thing mũi tên. scss &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }0 Vì vậy, nó sẽ chỉ xuống khi bắt đầu. Bây giờ chúng ta hãy truy cập JavaScript để thiết lập nó khi chúng ta nhấp vào nó, nó xoay lên hoặc xuống dựa trên trạng thái của nó. Chúng tôi có thể làm điều này thông qua Redux, nhưng tôi không nghĩ rằng chúng tôi sẽ cần Open file &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }8 của bạn. Chúng tôi sẽ thay đổi div thành thẻ 'A', không nên phá hỏng phong cách của chúng tôi. Bây giờ đó là thẻ 'A', chúng ta có thể cung cấp cho nó một &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }9 với chức năng tên mũi mũi tên. js &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }3 Khi chúng tôi nhìn vào trình duyệt của chúng tôi với bảng điều khiển mở, chúng tôi có thể thấy tin nhắn mỗi khi chúng tôi nhấp vào, vì vậy nó chắc chắn đang hoạt động Bây giờ, tất cả những gì chúng ta cần làm là làm cho nó được. Chúng ta có thể thực hiện điều này bằng cách sử dụng JavaScript thuần túy. Nếu tôi Google 'tài liệu JavaScript nhận phần tử' và nó dẫn tôi đến phương thức .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; }0. (Liên kết bên dưới) Tại trang web này, chúng tôi cũng có thể kiểm tra các ví dụ của họ về .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; }0 Ví dụ: khi bạn nhấp vào nút, văn bản sẽ thay đổi. Chúng ta cũng có thể thay đổi điều này để kiểm tra các ý tưởng khác nhau. Đây là một ví dụ cho nhu cầu của chúng tôi Điều này cho thấy rằng chúng ta có thể bổ sung và thay đổi tên lớp cho các yếu tố và chúng ta có thể sử dụng chúng với các chuyển tiếp cho hình ảnh động. Please use this thing in &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }8 của chúng tôi mũi tên. js &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }7 Bây giờ chúng tôi đã thiết lập với các chức năng này để gọi nhau. Về cơ bản &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }9 là một hàm chứa chức năng của .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; }4, vì vậy khi chúng tôi nhấp vào, &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }9 gọi .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; }4. Khi tôi kiểm tra điều đó trong quá trình duyệt, chúng tôi có thể thấy rằng nó hoạt động. Hãy cập nhật or____08 của chúng tôi mũi tên. js &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }3 Bây giờ chúng ta hãy viết một số phong cách cho công việc này. Theo mặc định, mũi tên của chúng tôi bị xoay 180 độ và nó yêu cầu hai cuộc gọi biến đổi, đó không phải là thứ mà chúng tôi muốn chọn mặc định của chúng tôi. Vì vậy, hãy thay đổi tệp của chúng tôi. Chúng tôi cũng cần phải điểm bắt đầu mũi tên của chúng tôi mũi tên. scss &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }4 Vì chúng tôi muốn mũi tên đóng là mặc định của chúng tôi, về mặt kỹ thuật, chúng tôi chỉ cần thêm và xóa tên lớp mũi tên. js &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }5 Bây giờ chúng tôi có các chức năng của chúng tôi, bạn có thể thấy rằng bằng cách thêm hoặc xóa các lớp .arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid $color-blue; height: 0; width: 0; }8, chúng tôi sẽ có thể mũi tên. Chúng ta hãy truy cập trình duyệt của chúng tôi và kiểm tra nó. Nó đúng, nhưng có vẻ như chúng ta đã có một lỗi và nó chỉ cho phép chúng ta đặt mũi tên đầu tiên Chúng tôi sẽ đặt hình ảnh động của chúng tôi trước, sau đó tìm ra lỗi đó. Please open &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }5 của chúng tôi mũi tên. scss &__line { border-bottom: 1px solid #F2f2f2; margin-top: 19px; margin-bottom: 24px; }8 Please try this thing now now. Như bạn có thể thấy nó trông rất đẹp. Hãy cam kết mã của chúng tôi và trong video tiếp theo, chúng tôi sẽ sửa lỗi đó và xem chúng tôi có thể làm gì khác |
