Hướng dẫn how can add click action in css? - làm cách nào để thêm hành động nhấp chuột trong css?

Trước khi chúng ta đi đến trung tâm của vấn đề, hãy để Lừa làm cho nó đúng để tham khảo trong tương lai - bạn nên xử lý một sự kiện click với JavaScript.

Tuy nhiên, nếu vì một lý do nào đó, bạn có thể sử dụng JavaScript, có hai cách tiếp cận phổ biến để bắt chước sự kiện click và tạo nút chuyển đổi với CSS.

Hack hộp kiểm 👎

Hack hộp kiểm không phải là một thực hành tốt:

• Nó không chính xác về mặt ngữ nghĩa, và đó là lý do tại sao nó gọi là hack.
• Nó gây ra các vấn đề về khả năng truy cập cho người dùng bàn phím và đầu đọc màn hình.
• Nó hạn chế bạn trong cấu trúc HTML của bạn vì hộp kiểm cần phải là anh chị em trước đây của yếu tố bạn muốn kiểm soát.
• Bạn có thể kiểm soát các yếu tố và .

: bộ chọn mục tiêu 👍

Lớp giả CSS ____4 đại diện cho một phần tử duy nhất (phần tử đích) với id khớp với đoạn của URL. Như bạn thấy trong ví dụ sau, giá trị Doer ____ ____, #fade-out, phù hợp với phần tử đích.

Bộ chọn :target có thể được sử dụng để tạo kiểu phần tử mục tiêu hoạt động hiện tại. Điều đó có nghĩa là nó hoạt động giống như một nút radio: chỉ có thể chọn một trong một nhóm nhất định.

Q. Làm thế nào bạn có thể tạo một nút chuyển đổi? A. Về cơ bản, đây là cách nó hoạt động: Bạn sử dụng hai siêu liên kết, một người làm thế nào và một người hoàn tác. Doer chỉ vào phần tử đích và Undoer, chỉ ra hư không, đảo ngược hiệu ứng. How can you create a toggle button? A. Basically, this is how it works: You use two hyperlinks, a “doer” and an “undoer”. The doer points to the target element, and the undoer, which points to nowhere, reverses the effect.

Các bản demo sau đây cho thấy tiềm năng của bộ chọn :target và cho bạn ý tưởng về cách sử dụng nó.

Phong cách một anh chị em trước

Phong cách một anh chị em tiếp theo

Một liên kết có thể nhắm mục tiêu ngay cả các phần tử neo rất giống nhau.

Thay thế một phần tử

Như bạn có thể nhận thấy, bạn hoàn toàn có thể thay thế một phần tử bằng một phần tử khác.

Bạn thậm chí có thể làm tổ các phần tử cấp khối bên trong mỏ neo của bạn.

Nếu bạn muốn có hiệu ứng chuyển tiếp khi bạn chuyển từ Doer sang Undoer, hãy sử dụng click1 vào lần thứ nhất và click2 vào lần thứ hai.

Ẩn và hiển thị nội dung

Đây là một menu điều hướng.

Và đây là một trang Câu hỏi thường gặp.

Chuyển sang một bảng kiểu hoàn toàn mới

Bạn có thể nhắm mục tiêu và tạo kiểu cho một yếu tố cũng như tất cả con cháu của nó. Ví dụ, hãy để mục tiêu của phần tử và chuyển đổi chế độ tối/sáng.

🎯🎯🎯

Không có chức năng CSS onclick tích hợp. Điều này có ý nghĩa, vì CSS chủ yếu là ngôn ngữ đánh dấu chứ không phải là ngôn ngữ lập trình. Tuy nhiên, có một thuộc tính HTML Onclick có thể được sử dụng với JavaScript - và có một cách để làm việc xung quanh việc thiếu CSS Onclick thông qua một hộp kiểm tra hộp.

Để sử dụng CSS Onclick, về cơ bản, bạn sẽ cần phải tạo một lớp giả. Bạn sẽ sử dụng các bộ chọn CSS và Hack hộp kiểm để tạo ra một cái gì đó giống như chức năng Onclick. Và bạn có thể thoát khỏi đ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ỏ, như chiều rộng biên giới hoặc bán kính đường viền.

Hãy cùng xem xét sâu hơn về cách sử dụng chức năng onclick trong CSS.

Nó có nghĩa là gì khi làm một cái gì đó mà on onclick?

Bạn nhấp vào một nút. Một cảnh báo bật lên. Đó là một người khác. Một on onclick là một sự kiện kích hoạt chính xác khi người dùng nhấp vào một nút. Và lưu ý rằng nó xảy ra khi người dùng nhấp, không phải khi người dùng dừng nhấp (OnMouseup).

Xem xét một sự kiện nhấp chuột thay đổi hình ảnh nền của một trang, làm nổi bật một khối hiển thị đích, tải tệp IMG SRC HTTPS hoặc thay đổi trang web. Tất cả những điều này thường được thực hiện thông qua sự kết hợp của HTML, CSS và JavaScript, không phải CSS.

Sử dụng chức năng onclick của HTML với JavaScript

Bạn có thể sử dụng chức năng onclick của HTML với JavaScript. Cách để làm điều này là tạo hàm JavaScript và sau đó đính kèm chức năng vào sự kiện onclick của phần tử HTML. Bạn sẽ sử dụng một cái gì đó như thế này:

function ChangeBackgroundImg () {var bg = document.getEuityById (Hồi bgimg,); bg.style.background = Hồi url (‘newImage.jpg,)
var bg = document.getElementById(“bgIMG”);
bg.style.background = “url(‘newimage.jpg’)”;
}
document.getElementById(“btn”).onclick = changeBackgroundIMG;

Trong ví dụ này, hàm được gọi là ChangeBackgroundImg (). Nó lấy một đối số, BG, đó là ID HTML của phần tử chứa hình nền. Hàm sau đó đặt thuộc tính nền của phần tử BG thành URL của hình nền mới.

Dòng cuối cùng trong mã gắn hàm ChangeBackGroundImg () vào sự kiện onclick của phần tử BG. Vì vậy, khi bạn nhấp vào phần tử BG, hàm ChangeBackGroundImg () sẽ được thực thi.

Hack cho việc sử dụng CSS Onclick

Mặc dù nó không phải là máy học hoặc thiết lập một máy ảo, nhưng nó rất phức tạp khi sử dụng các bộ chọn CSS để cố gắng tạo chức năng onclick.

Vì vậy, tại sao bạn muốn làm điều đó? Chà, hãy để nói rằng bạn có thể chạy JavaScript, hoặc bạn đang cố gắng hoàn thành việc phát triển web của mình với hỗ trợ trình duyệt tối đa.

Để chỉ sử dụng CSS, bạn cần tận dụng các thẻ nhãn, khớp ID và hộp kiểm.

Tại đây, cách sử dụng chức năng CSS Onclick:

1. Thêm nhãn vào hộp kiểm của bạn.

2. Cung cấp cho nhãn một ID phù hợp với ID của hộp kiểm.

3. Trong CSS của bạn, sử dụng: Đã kiểm tra để nhắm mục tiêu trạng thái đã kiểm tra của hộp kiểm.

Các khóa học hàng đầu trong CSS

Về cơ bản, trạng thái của hộp kiểm được kiểm tra trên mạng của hộp kiểm sẽ xác định phần tử đã nhấp chuột. Nhưng hộp kiểm phải là phần tử của thuộc tính onclick.

& nbsp; & nbsp; & nbsp; & nbsp; nhãn {& nbsp; & nbsp; & nbsp; & nbsp; Hiển thị: Khối; & nbsp; & nbsp; & nbsp; & nbsp; Bối cảnh: màu xanh; & nbsp; & nbsp; & nbsp; & nbsp; chiều rộng: 100px; & nbsp; & nbsp; & nbsp; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; #Box: Đã kiểm tra + nhãn {& nbsp; & nbsp; & nbsp; & nbsp; Bối cảnh: Màu xanh lá cây; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Thay đổi nền & nbsp; & nbsp;style>
      label {
        display: block;
        background: blue;
        width: 100px;
        height: 100px;
      }
      #box:checked + label {
        background: green;
      }
    style>
  head>
  <body>
    <form action=”/form/submit” method=”post”>
      <input type=”checkbox” id=”box” />
      <label for=”box”>Change backgroundlabel>
    form>

Rõ ràng, đây là cách tối ưu để làm mọi thứ. Nhưng đó là cách duy nhất để thực sự sử dụng hàm onclick trong CSS.

Tầm quan trọng của hàm onclick

Chức năng Onclick cho phép bạn tương tác với người dùng. Ví dụ: bạn có thể hiển thị một hộp cảnh báo hoặc tải một trang mới bằng hàm onclick.

Nếu không có chức năng Onclick, bạn sẽ cần sử dụng JavaScript để làm những việc này. Vì vậy, nếu bạn muốn tạo các trang web năng động và tương tác hơn, bạn cần sử dụng các chức năng Onclick.

Sự kiện CSS Onhover

Có một lựa chọn khác: Sự kiện CSS Onhover. Sự kiện này bắn khi người dùng di chuyển chuột qua một phần tử. Bạn có thể sử dụng nó để thay đổi CSS của một phần tử khi chuột được di chuyển qua nó.

Đây là cách bạn sẽ sử dụng nó:

1. Thêm một lớp vào phần tử HTML của bạn.
2. Trong CSS của bạn, sử dụng: Di chuột để nhắm mục tiêu trạng thái di chuột của phần tử.
3. Thêm các thuộc tính CSS mong muốn vào bộ chọn: Hover.

& nbsp; & nbsp; .Highlight {& nbsp; & nbsp; & nbsp; Bối cảnh: màu xanh;} Điểm nổi bậtstyle>
    .highlight {
      background: blue;
}
style>
<div class=”highlight”>Highlightdiv>

Trong ví dụ này, lớp .Highlight được thêm vào một phần tử. Màu nền của lớp .Highlight được đặt thành màu vàng. Khi bạn di chuyển chuột qua phần tử, màu nền sẽ chuyển sang màu vàng.

Mặc dù đây không phải là một sự kiện của On Onclick, nhưng nó cũng không phải là một sự kiện của JavaScript. Và điều đó rất quan trọng nếu bạn đang cố gắng tạo ra một trang web đẹp mà không cần phải sử dụng JavaScript. Mặt khác…

Học sinh CSS cũng học

Những lợi thế của việc sử dụng JavaScript cho các chức năng Onclick

JavaScript mạnh hơn CSS. Vì vậy, nếu bạn cần làm những việc phức tạp hơn với chức năng onclick của mình, bạn có thể muốn sử dụng xử lý sự kiện JavaScript Onclick.

JavaScript được hỗ trợ bởi hầu hết tất cả các trình duyệt. Vì vậy, nếu bạn đang cố gắng tạo một trang web sẽ được sử dụng bởi càng nhiều người càng tốt, JavaScript vẫn còn nhiều khả năng hơn.

Nếu bạn đang nghĩ về việc làm một cái gì đó như khởi chạy hộp văn bản hoặc đối thoại khi ai đó nhấp vào nút, CSS không có khả năng cắt nó.

Kết luận: Các bước tiếp theo

Một mình CSS có thể làm mọi thứ, nhưng với sự hiểu biết tốt về cách thức hoạt động và những gì có thể, bạn có thể tạo các trang web đẹp và đáp ứng chỉ bằng CSS. & NBSP; Tuy nhiên, bạn có thể cần đào sâu hơn vào HTML và JavaScript nếu bạn muốn tạo các trang web thực sự năng động với các sự kiện onclick.

Tuy nhiên, nếu bây giờ bạn chỉ học CSS, thì việc đẩy các ràng buộc của những gì bạn có thể và có thể làm là một cách tuyệt vời để có được kiến ​​thức nâng cao hơn. Nó cũng có thể là một cách tốt để chuẩn bị cho một cuộc phỏng vấn sắp tới về lập trình CSS.

Vì vậy, các bước tiếp theo là gì? Đầu tiên, bạn có thể tìm hiểu thêm về việc sửa đổi các thuộc tính như kích thước phông chữ CSS. Bạn cũng có thể xem xét tham gia một trong nhiều lớp Udemy trên CSS.

Tôi có thể thêm onclick vào CSS không?

Chúng tôi có thể áp dụng onclick trên div không?

Chúng ta có thể sử dụng onclick trong html không?

Phần tử HTML nào có onclick?