Tôi có thể thêm onclick vào css không?
|
Một lần nhấp vào một phần tử sẽ kích hoạt sự kiện onclick. Sự kiện này có thể xác thực biểu mẫu, cung cấp thông báo cảnh báo, v.v. Các hộp kiểm trong CSS là cách tốt nhất để mô phỏng các sự kiện onclick. Bài viết này trình bày cách bạn có thể mô phỏng sự kiện onclick bằng CSS Show
Làm cách nào để Mô phỏng Sự kiện onclick trong CSS?Để mô phỏng kỹ thuật hộp kiểm sự kiện onclick được sử dụng. Trước khi tiếp tục, chúng ta tìm hiểu hộp kiểm là gì Hộp kiểm trong CSS là gì?Hộp kiểm là một kỹ thuật có thể kiểm soát sự xuất hiện của một số thành phần nhất định, chẳng hạn như chuyển đổi mức độ hiển thị của các tab, menu thả xuống, v.v. cú pháp Cú pháp của hộp kiểm được đưa ra dưới đây < đầu vào loại = "hộp kiểm" id="ID"/> Tôi. Đó là tên của lớp chúng tôi đã chỉ định Hãy để chúng tôi chuyển sang ví dụ thực tế trong đó chúng tôi sẽ áp dụng sự kiện onclick trên một hình ảnh Thí dụ. Làm cách nào để mô phỏng sự kiện onclick? Ở đây chúng tôi sẽ
 Như đã thấy ở trên trong HTML, hàm chúng ta sẽ sử dụng là changeColor(). Đây là lý do changeColor được đặt làm mã định danh hàm (tên) của chúng tôi. Nó sẽ không hoạt động nếu tên khớp với nội dung trong HTML. Trong DOM để thay đổi bất kỳ thứ gì liên quan đến phong cách, bạn phải viết “phong cách” theo sau là dấu chấm (. ). Sửa đổi bạn muốn thực hiện sau đó được thực hiện, có thể là màu sắc, màu nền, kích thước văn bản, v.v. Để truy cập văn bản “Thay đổi màu sắc”, chúng tôi sẽ sử dụng tên biến đã khai báo trong hàm của mình, sau đó chúng tôi đặt màu của văn bản thành màu xanh lam. Khi chúng tôi nhấn nút, màu của văn bản sẽ chuyển sang màu xanh lam Bằng cách thêm nhiều màu hơn vào văn bản của chúng tôi, chúng tôi có thể tiến xa hơn một bước Vì vậy, những gì chúng tôi muốn làm là làm cho chữ viết có màu đỏ cam, xanh lục và xanh dương. Lần này, các hàm HTML onclick chấp nhận các giá trị cho màu mà chúng tôi muốn áp dụng cho văn bản. Trong JavaScript, chúng được gọi là tham số. Chúng ta sẽ xây dựng một hàm cũng chấp nhận các tham số của nó. Chúng tôi sẽ gọi chúng là “màu sắc”. Trang web của chúng tôi đã trải qua những thay đổi nhỏ Vì vậy, hãy chọn văn bản “Thay đổi màu” của chúng tôi và nhập mã để làm cho nó có màu đỏ cam, xanh dương và xanh lục Trước tiên, mã của hàm đặt màu thành bất kỳ màu nào được cung cấp cho lệnh gọi changeColor() trong các nút HTML sau khi truy xuất biến tên, được sử dụng để lưu trữ văn bản “Thay đổi màu sắc. ” Khi chúng ta nhấn một trong các nút đó (xanh dương, xanh lục và cam), màu của văn bản sẽ thay đổi tương ứng ví dụ 2. Tạo cảnh báo bằng sự kiện OnclickTrong ví dụ này, hãy tạo một trang web mẫu có nút bằng HTML. Khi nhấn nút, chúng tôi sẽ nhận được thông báo cảnh báo ở đầu màn hình. Để tạo một trang web, chúng tôi sẽ sử dụng đoạn mã sau Một trang web bao gồm một nút sẽ được tạo bằng mã này Bây giờ, chúng ta phải viết một hàm JavaScript sẽ được thực thi để tạo cảnh báo. Hãy tạo một hàm showAlert() bên trong các thẻ script bên trong cùng một mã HTML như sau Vì vậy, sau khi viết phương thức JavaScript để thay đổi màu sắc, chúng ta phải thêm thuộc tính onclick vào nút của mình. Do đó, chúng ta phải thay đổi một chút HTML của mình Cập nhật mã này sẽ thêm chức năng cho nút. Khi người dùng nhấn nút, thuộc tính onclick trên nút sẽ kích hoạt chức năng showAlert(). Người dùng bàn phím cũng có thể sử dụng sự kiện onclick. Thông báo cũng sẽ được gửi nếu người dùng sử dụng phím tab để di chuyển đến nút rồi nhấn enter Như bạn có thể thấy ở trên, sau khi nhấn nút hiển thị cảnh báo, chúng tôi nhận được thông báo cảnh báo Đối với phần tử nút, có thể thêm một kiểu mới. Để sửa đổi giao diện của nút khi người dùng di chuột qua nút hoặc tab bàn phím tới nút đó, hãy sử dụng các lớp giả CSS (. bay lượn,. tập trung và. tích cực) Đoạn mã trên sẽ cách điệu một nút. Nó chỉ dành cho trải nghiệm của người dùng. Cách điệu nút sẽ không ảnh hưởng đến chức năng của nút Hãy thử nhấp vào nút sau khi tạo kiểu cho nó. Nếu tất cả diễn ra theo đúng kế hoạch, việc di chuột qua nút sẽ gây ra thay đổi về kiểu dáng và giống như trước đây, nhấn nút sẽ khiến cảnh báo xuất hiện cùng với văn bản tùy chỉnh của bạn được hiển thị. Để đảm bảo nó cũng hoạt động với người dùng bàn phím, hãy thử nghiệm ngay bây giờ mà không cần chuột ví dụ 3. Sự kiện onclick để sao chép văn bảnChúng tôi cũng có thể sao chép văn bản từ trường này sang trường khác bằng cách sử dụng sự kiện onclick và chức năng Javascript. Hãy tạo một trang HTML với hai trường văn bản đầu vào để chúng tôi có thể ghi dữ liệu để sao chép Chúng ta phải viết hàm bên trong các thẻ script để chúng ta có thể gọi chúng bằng sự kiện onclick như sau Sau khi cập nhật mã, khi bạn nhấn nút, sự kiện onclick sẽ gọi hàm copyTxt và văn bản của trường text1 sẽ được sao chép sang trường text2 Sự kết luậnTrong hướng dẫn này, chúng ta đã thấy rằng khi một phần tử được nhấp vào, sự kiện onclick cho phép lập trình viên chạy một hàm JavaScript. Chúng tôi có thể sử dụng nó cho nhiều chức năng khác nhau, chẳng hạn như thông báo cảnh báo và xác thực biểu mẫu, v.v. Chúng tôi đã triển khai ba ví dụ trong bài đăng này để cho bạn thấy cách bạn có thể thay đổi màu của văn bản, cách tạo cảnh báo và cách sao chép văn bản từ trường này sang trường khác bằng cách sử dụng sự kiện onclick và các hàm JavaScript Bạn có thể đặt Onclick trong CSS không?Để sử dụng CSS onClick, về cơ bản, bạn cần tạo một lớp giả . Bạn sẽ sử dụng bộ chọn CSS và hack hộp kiểm để tạo ra thứ gì đó giống như hàm OnClick. Và bạn có thể bỏ qua điều này nếu bạn chỉ muốn sử dụng CSS để thực hiện một số thay đổi nhỏ, chẳng hạn như chiều rộng đường viền hoặc bán kính đường viền.
Bạn có thể thêm onclick vào div không?Cách đặt trình nghe onClick trên phần tử div trong React. Đặt giá đỡ onClick trên div . Hàm bạn chuyển đến chỗ dựa sẽ được gọi mỗi khi nhấp vào div. Bạn có thể truy cập div dưới dạng sự kiện.
Bạn có thể đặt Onclick trên bất cứ thứ gì không?Tất cả phần tử HTML có thể có thuộc tính onclick . Xem đặc tả HTML 5 để xác nhận. (Tất nhiên, một số thành phần không được hiển thị theo mặc định, do đó bạn sẽ phải thay đổi thuộc tính hiển thị của chúng bằng CSS trước khi có thể nhấp vào chúng để kích hoạt trình xử lý sự kiện).
Chúng ta có thể thêm onclick vào nút không?Thuộc tính onclick là thuộc tính sự kiện được tất cả các trình duyệt hỗ trợ. Nó xuất hiện khi người dùng nhấp vào một phần tử nút. Nếu bạn muốn tạo nút onclick, bạn cần thêm thuộc tính sự kiện onclick vào phần tử .
|
