JS onclick CSS

Thuộc tính sự kiện onclick trong HTML hoạt động khi người dùng nhấp vào nút. Khi nhấp chuột vào phần tử thì tập lệnh sẽ chạy

Nội dung chính Show

Cách sử dụng sự kiện <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4 trong JavaScript
Cú pháp <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4 cơ bản
Ví dụ về sự kiện <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4
Cách sử dụng nhấp chuột <div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> 9 trong JavaScript
Cú pháp <div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> 9 cơ bản
Cách xây dựng nút "Hiển thị thêm" và "Hiển thị ít hơn" bằng JavaScript
Video Giải thích về Nút HTML onclick
Phần kết luận
Bạn có thể sử dụng onclick trong CSS không?
Làm cách nào để đặt chức năng onclick trong JavaScript?
Làm cách nào để bật sự kiện onclick trong JavaScript?
element to change the text color: .. . Một ví dụ khác về cách thay đổi màu của một phần tử. . Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác Onclick có thực hành tốt không?

cú pháp

<element onclick = "script">

Giá trị thuộc tính. Thuộc tính này chứa một tập lệnh giá trị duy nhất hoạt động khi nhấp chuột vào phần tử

Supported Tags: This attribute is supported by all HTML tags except , ,
, , , , <meta>, <param>, <script>, <style>, and <title>.</p><p>ví dụ 1. Ví dụ này hiển thị sự kiện onClick đơn giản trong đó nút được nhấp để hiển thị ngày và giờ trong HTML</p><p><p><h2>HTML</h2><p><p><p><p><p><p><p><br></p><p></p><p><br><br></p><p><p><p><p><code><!DOCTYPE html></code></p><p><code><</code><code>html</code><code>></code></p><p><code><</code><code>body</code><code>></code></p><p><code> </code><code><</code><code><!DOCTYPE html></code>0<code><!DOCTYPE html></code>1<code><!DOCTYPE html></code>0<code>></code></p><p><code> </code><code><</code><code><!DOCTYPE html></code>6<code><!DOCTYPE html></code>7<code><!DOCTYPE html></code>6<code>></code></p><p><code> </code><code><</code><code><</code>2<code><</code>3<code><</code>2<code>></code></p><p><code> </code>76_______<code><</code>8 <code><</code>9<code>html</code>0<code>html</code>1<code>></code></p><p><code>html</code>3<code>html</code>4</p><p><code> </code><code>html</code>6_______76_______8<code>></code></p><p><code> </code>76_______<code>></code>1 <code>></code>2<code>html</code>0<code><!DOCTYPE html></code>16 <code><</code>9<code>html</code>0<code><!DOCTYPE html></code>19<code>></code></p><div></div> <p>Liên kết đưa bạn đến một phần nhất định của trang, một trang khác của trang web hoặc một trang web khác hoàn toàn. Mặt khác, các nút thường được thao tác bởi các sự kiện JavaScript để chúng có thể kích hoạt một số chức năng nhất định</p><p>Trong hướng dẫn này, chúng ta sẽ khám phá hai cách khác nhau để thực hiện các sự kiện nhấp chuột trong JavaScript bằng hai phương thức khác nhau</p><p>Đầu tiên, chúng ta sẽ xem xét kiểu <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 truyền thống mà bạn thực hiện ngay từ trang HTML. Sau đó, chúng ta sẽ xem cách hoạt động của "nhấp chuột" hiện đại hơn <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>5, cho phép bạn tách HTML khỏi JavaScript</p><h2 id="cach-su-dung-su-kien-lt-div-gt-lt-p-class-name-gt-freecodecamp-lt-p-gt-lt-button-gt-change-to-blue-lt-button-gt-lt-div-gt-4-trong-javascript">Cách sử dụng sự kiện <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4 trong JavaScript</h2><p>Sự kiện <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 thực thi một chức năng nhất định khi một nút được bấm. Điều này có thể xảy ra khi người dùng gửi biểu mẫu, khi bạn thay đổi nội dung nhất định trên trang web và những việc khác tương tự</p><p>Bạn đặt hàm JavaScript mà bạn muốn thực thi bên trong thẻ mở của nút</p><h3 id="cu-phap-lt-div-gt-lt-p-class-name-gt-freecodecamp-lt-p-gt-lt-button-gt-change-to-blue-lt-button-gt-lt-div-gt-4-co-ban">Cú pháp <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4 cơ bản</h3><pre><code><element onclick="functionToExecute()">Click</element> </code></pre><p>Ví dụ</p></p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre><p>Lưu ý rằng thuộc tính <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 hoàn toàn là JavaScript. Giá trị nó nhận, là chức năng bạn muốn thực hiện, nói lên tất cả, vì nó được gọi ngay trong thẻ mở</p><p>Trong JavaScript, bạn gọi một hàm bằng cách gọi tên của nó, sau đó bạn đặt dấu ngoặc đơn sau mã định danh hàm (tên)</p><h2 id="vi-du-ve-su-kien-lt-div-gt-lt-p-class-name-gt-freecodecamp-lt-p-gt-lt-button-gt-change-to-blue-lt-button-gt-lt-div-gt-4">Ví dụ về sự kiện <div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> 4</h2><p>Tôi đã chuẩn bị một số HTML cơ bản với một chút phong cách để chúng ta có thể đưa sự kiện <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 vào thực tế</p><pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre><p>Và đây là CSS để làm cho nó đẹp mắt, cùng với tất cả phần còn lại của mã ví dụ</p><pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre><p>Vì vậy, trên trang web, đây là những gì chúng ta có<br><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://ap.cdnki.com/r_js-onclick-css---a08a40c71cd3bc5d18df55130bc54951.webp" ></div></p><p>Mục đích của chúng tôi là thay đổi màu của văn bản thành màu xanh lam khi chúng tôi nhấp vào nút. Vì vậy, chúng ta cần thêm thuộc tính <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 vào nút của mình, sau đó viết hàm JavaScript để thay đổi màu sắc</p><p>Vì vậy, chúng tôi cần thực hiện một thay đổi nhỏ trong HTML của mình</p><pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre><p>Chức năng chúng tôi muốn thực hiện là <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>3. Vì vậy, chúng tôi cần viết nó trong tệp JavaScript hoặc trong tệp HTML bên trong thẻ <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>4</p><p>Nếu bạn muốn viết tập lệnh của mình trong tệp JavaScript, bạn cần liên kết tập lệnh đó trong HTML bằng cú pháp bên dưới</p><pre><code><script src="path-to-javascript-file"></script> </code></pre><p>Nếu bạn muốn viết tập lệnh trong tệp HTML, chỉ cần đặt tập lệnh đó vào trong thẻ script</p><pre><code><script> // Your Scripts </script> </code></pre><p>Bây giờ, hãy viết hàm <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>3 của chúng ta</p><p>Trước hết, chúng ta cần chọn phần tử mà chúng ta muốn thao tác, đó là văn bản freeCodeCamp bên trong thẻ <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>6</p><p>Trong JavaScript, bạn làm điều đó với các phương thức của DOM là <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>7, <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>8 hoặc <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>9. Sau đó, bạn lưu trữ giá trị trong một biến</p><p>Trong hướng dẫn này, tôi sẽ sử dụng <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>9 vì nó hiện đại hơn và nhanh hơn. Tôi cũng sẽ sử dụng <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>1 để khai báo các biến của chúng ta thay vì <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>2 và <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>3, bởi vì với <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>1, mọi thứ sẽ an toàn hơn khi biến trở thành chỉ đọc</p><pre><code>const name = document.querySelector(".name"); </code></pre><p>Bây giờ chúng ta đã chọn văn bản, hãy viết chức năng của chúng ta. Trong JavaScript, cú pháp hàm cơ bản trông như thế này</p><pre><code>function funcctionName () { // What to do } </code></pre><p>Vì vậy, hãy viết chức năng của chúng tôi</p><pre><code>function changeColor() { name.style.color = "blue"; } </code></pre><p>Điều gì đang xảy ra?</p><p>Hãy nhớ từ HTML rằng <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>3 là chức năng chúng ta sẽ thực hiện. Đó là lý do tại sao định danh hàm (tên) của chúng tôi được đặt thành <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>6. Nếu tên không tương quan với nội dung trong HTML, nó sẽ không hoạt động</p><p>Trong DOM (Mô hình đối tượng tài liệu, đề cập đến tất cả HTML), để thay đổi bất kỳ thứ gì liên quan đến kiểu dáng, bạn cần viết “kiểu dáng” sau đó là dấu chấm (. ). Tiếp theo là những gì bạn muốn thay đổi, đó có thể là màu sắc, màu nền, cỡ chữ, v.v.</p><p>Vì vậy, bên trong hàm của chúng ta, chúng ta lấy biến tên mà chúng ta đã khai báo để lấy văn bản freeCodeCamp, sau đó chúng ta đổi màu thành màu xanh lam</p><p>Màu của văn bản của chúng tôi chuyển sang màu xanh lam bất cứ khi nào nhấp vào nút</p><p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2NoYW5nZUNvbG9yLmdpZg==.webp" ></div></p><p>Mã của chúng tôi đang hoạt động</p><p>Chúng ta có thể tiến xa hơn một chút bằng cách thay đổi văn bản của mình thành nhiều màu sắc hơn</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>0<p>Vì vậy, những gì chúng tôi muốn làm là thay đổi văn bản thành xanh dương, xanh lá cây và đỏ cam</p><p>Khoảng thời gian này, các hàm <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 trong HTML của chúng tôi lấy các giá trị của màu mà chúng tôi muốn thay đổi văn bản thành. Chúng được gọi là tham số trong JavaScript. Hàm chúng ta sẽ viết cũng có chức năng riêng, mà chúng ta sẽ gọi là “màu”</p><p>Trang web của chúng tôi đã thay đổi một chút</p><p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2NoYW5nZUNvbG9ycy5wbmc=.webp" ></div></p></p><p>Vì vậy, hãy chọn văn bản freeCodeCamp của chúng ta và viết hàm để thay đổi màu của nó thành xanh dương, xanh lá cây và đỏ cam</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>1<p>Khối mã trong hàm lấy biến tên (nơi chúng tôi lưu trữ văn bản freeCodeCamp của mình), sau đó đặt màu thành bất kỳ thứ gì chúng tôi chuyển vào các hàm <pre><code> body { display: flex; align-items: center; justify-content: center; height: 100vh; } p { font-size: 2rem; } button { padding: 7px; border: none; border-radius: 4px; cursor: pointer; } button.blue { background-color: #3498db; } button.green { background-color: #2ecc71; } button.orange { background-color: orangered; } </code></pre>3 trong các nút HTML<br><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly93d3cuZnJlZWNvZGVjYW1wLm9yZy9uZXdzL2NvbnRlbnQvaW1hZ2VzLzIwMjEvMDgvY2hhbmdlQ29sb3JzLmdpZg==.webp" ></div></p><h2 id="cach-su-dung-nhap-chuot-lt-div-gt-lt-p-class-name-gt-freecodecamp-lt-p-gt-lt-button-onclick-changecolor-gt-change-to-blue-lt-button-gt-lt-div-gt-9-trong-javascript">Cách sử dụng nhấp chuột <div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> 9 trong JavaScript</h2><p>Trong JavaScript, có nhiều cách để làm cùng một việc. Khi bản thân JavaScript phát triển theo thời gian, chúng tôi bắt đầu cần tách mã HTML, CSS và JavaScript để tuân thủ các phương pháp hay nhất</p><p>Trình xử lý sự kiện có thể thực hiện điều này vì chúng cho phép bạn tách JavaScript khỏi HTML. Bạn cũng có thể làm điều này với onclick, nhưng hãy thực hiện một cách tiếp cận khác tại đây</p><h3 id="cu-phap-lt-div-gt-lt-p-class-name-gt-freecodecamp-lt-p-gt-lt-button-onclick-changecolor-gt-change-to-blue-lt-button-gt-lt-div-gt-9-co-ban">Cú pháp <div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> 9 cơ bản</h3><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>2<p>Bây giờ, hãy thay đổi văn bản freeCodeCamp thành màu xanh lam bằng cách sử dụng trình nghe sự kiện nhấp chuột</p><p>Đây là HTML mới của chúng tôi</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>3<p>Và đây là những gì nó trông giống như</p><p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2NvbG9yQ2hhbmdlLnBuZw==.webp" ></div></p><p>Lần này trong tập lệnh của chúng ta, chúng ta cũng cần chọn nút (không chỉ văn bản freeCodeCamp). Đó là bởi vì không có JavaScript trong thẻ mở nút của chúng tôi, điều này thật tuyệt</p><p>Vì vậy, kịch bản của chúng tôi trông như thế này</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>4<p>Chúng tôi cũng có thể tách hoàn toàn chức năng của mình khỏi <pre><code><div> <p class="name">freeCodeCamp</p> <button onclick="changeColor()">Change to Blue</button> </div> </code></pre>9 và chức năng của chúng tôi sẽ vẫn giữ nguyên</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>5<p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2NoYW5nZUNvbG9yV2l0aEV2ZW50cy5naWY=.webp" ></div></p><h2 id="cach-xay-dung-nut-hien-thi-them-va-hien-thi-it-hon-bang-javascript">Cách xây dựng nút "Hiển thị thêm" và "Hiển thị ít hơn" bằng JavaScript</h2><p>Một trong những cách tốt nhất để học là làm dự án, vì vậy hãy lấy những gì chúng ta đã học về <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 và "nhấp chuột" vào <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>5 để xây dựng thứ gì đó</p><p>Khi bạn truy cập một blog, bạn thường thấy các đoạn trích của bài viết đầu tiên. Sau đó, bạn có thể nhấp vào nút "đọc thêm" để hiển thị phần còn lại. Hãy cố gắng làm điều đó</p><p>Đây là HTML chúng tôi đang xử lý</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>6<p>Đó là HTML đơn giản với một số thông tin về freeCodeCamp. Và có một nút chúng tôi đã đính kèm một <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 vào. Hàm chúng tôi muốn thực thi là <pre><code><script src="path-to-javascript-file"></script> </code></pre>5, chúng tôi sẽ viết sớm</p><p>Không có CSS, đây là những gì chúng ta có<br><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2FydGljbGV1bnN0eWxlZC5wbmc=.webp" ></div></p><p>Nó không quá xấu, nhưng chúng ta có thể làm cho nó đẹp hơn và hoạt động theo cách chúng ta muốn. Vì vậy, chúng tôi có một số CSS mà tôi sẽ giải thích bên dưới</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>7<p>CSS đang làm gì?</p><p>Với bộ chọn chung (<pre><code><script src="path-to-javascript-file"></script> </code></pre>6), chúng tôi đang xóa lề và phần đệm mặc định được gán cho các thành phần để chúng tôi có thể thêm lề và phần đệm của riêng mình</p><p>Chúng tôi cũng đặt kích thước hộp thành hộp viền để chúng tôi có thể bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của các phần tử của chúng tôi</p><p>Chúng tôi căn giữa mọi thứ trong cơ thể bằng Flexbox và tạo cho nó một nền màu xám nhạt</p><p>Phần tử <pre><code><script src="path-to-javascript-file"></script> </code></pre>7 của chúng tôi, chứa văn bản, có chiều rộng là <pre><code><script src="path-to-javascript-file"></script> </code></pre>8, nền trắng (#fff) và có phần đệm 20px ở trên cùng, 20 ở bên trái và bên phải và 0 ở dưới cùng</p><p>Các thẻ đoạn bên trong nó có cỡ chữ là 18px và sau đó chúng tôi đã cung cấp cho chúng chiều cao tối đa là <pre><code><script src="path-to-javascript-file"></script> </code></pre>9. Do chiều cao tối đa của thành phần bài viết, tất cả văn bản sẽ không được chứa và sẽ tràn ra ngoài. Để khắc phục điều này, chúng tôi đặt tràn thành ẩn để không hiển thị văn bản đó lúc đầu</p><p>Thuộc tính chuyển đổi đảm bảo rằng mọi thay đổi xảy ra sau 1 giây. Tất cả văn bản bên trong <pre><code><script> // Your Scripts </script> </code></pre>0 đều được căn đều và có lề trên 20 pixel để văn bản không quá dính vào đầu trang</p><p>Bởi vì chúng tôi đã loại bỏ lề mặc định, tất cả các đoạn văn của chúng tôi được đẩy vào nhau. Vì vậy, chúng tôi đặt lề dưới là 16 pixel để tách chúng khỏi nhau</p><p>Bộ chọn của chúng tôi, <pre><code><script> // Your Scripts </script> </code></pre>1, có thuộc tính của <pre><code><script> // Your Scripts </script> </code></pre>2 được đặt thành <pre><code><script> // Your Scripts </script> </code></pre>3. Điều này có nghĩa là bất cứ lúc nào phần tử mạo từ có một lớp <pre><code><script> // Your Scripts </script> </code></pre>4 được đính kèm, chiều cao tối đa sẽ thay đổi từ <pre><code><script src="path-to-javascript-file"></script> </code></pre>9 thành <pre><code><script> // Your Scripts </script> </code></pre>3 để hiển thị phần còn lại của mạo từ. Điều này có thể thực hiện được với JavaScript – công cụ thay đổi cuộc chơi của chúng tôi</p><p>Chúng tôi đã tạo kiểu cho nút của mình với nền tối và làm cho nó có màu trắng. Chúng tôi đặt đường viền của nó thành không để xóa đường viền mặc định của HTML trên các nút và chúng tôi đã cung cấp cho nó bán kính đường viền là <pre><code><script> // Your Scripts </script> </code></pre>7 để nó có đường viền hơi tròn</p></p><p>Cuối cùng, chúng tôi đã sử dụng lớp giả <pre><code><script> // Your Scripts </script> </code></pre>8 trong CSS để thay đổi con trỏ nút thành con trỏ. Màu nền hơi thay đổi khi người dùng di chuột qua nó</p><p>Chúng ta bắt đầu – đó là CSS</p><p>Trang của chúng tôi bây giờ trông đẹp hơn</p><p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2FydGljbGVzdHlsZWQucG5n.webp" ></div></p><p>Điều tiếp theo chúng ta cần làm là viết JavaScript để có thể xem phần còn lại của bài viết bị ẩn</p><p>Chúng tôi có một thuộc tính <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4 bên trong thẻ mở nút của chúng tôi đã sẵn sàng để thực thi một chức năng <pre><code><script src="path-to-javascript-file"></script> </code></pre>5, vì vậy hãy viết chức năng này</p><p>Chúng tôi cần chọn bài viết của mình trước, vì chúng tôi phải hiển thị phần còn lại của nó</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>8<p>Điều tiếp theo chúng ta cần làm là viết hàm <pre><code><script src="path-to-javascript-file"></script> </code></pre>5 để chúng ta có thể chuyển đổi giữa xem phần còn lại của bài báo và ẩn nó đi</p><pre><code><button onclick="functionToExecute()">Click</button> </code></pre>9<p>Chức năng đang làm gì?</p><p>Chúng tôi sử dụng một tuyên bố <pre><code>const name = document.querySelector(".name"); </code></pre>2 ở đây. Đây là một phần quan trọng của JavaScript giúp bạn đưa ra quyết định trong mã của mình nếu một điều kiện nhất định được đáp ứng</p><p>Cú pháp cơ bản trông như thế này</p><pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>0<p>Ở đây, nếu tên lớp của bài viết bằng open (nghĩa là chúng ta muốn thêm lớp open vào nó, lớp này được đặt chiều cao tối đa là 1000px trong CSS), thì chúng ta muốn xem phần còn lại của bài viết. Ngược lại, chúng tôi muốn bài viết trở về trạng thái ban đầu nơi một phần của nó bị ẩn</p><p>Chúng tôi làm điều này bằng cách gán cho nó một lớp mở trong khối khác, điều này làm cho nó hiển thị phần còn lại của bài báo. Sau đó, chúng tôi đặt lớp thành một chuỗi trống (không có) trong khối if, khiến nó trở về trạng thái ban đầu</p><p>Mã của chúng tôi đang hoạt động tốt với quá trình chuyển đổi suôn sẻ<br><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2FydGljbGUuZ2lm.webp" ></div></p><p>Chúng tôi có thể tách HTML và JavaScript mà vẫn sử dụng <pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>4, vì onclick là JavaScript. Vì vậy, có thể viết phần này trong tệp JavaScript thay vì bắt đầu từ HTML</p><pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>1<p><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy8yMDIxLzA4L2FydGljbGVvbmNsaWNrLmdpZg==.webp" ></div></p><p>Chúng tôi cũng có thể làm điều này bằng cách sử dụng Trình lắng nghe sự kiện</p><pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>2<pre><code><div> <p class="name">freeCodeCamp</p> <button>Change to Blue</button> </div> </code></pre>3<p>Chức năng của chúng tôi vẫn giữ nguyên</p><h2 id="video-giai-thich-ve-nut-html-onclick">Video Giải thích về Nút HTML onclick</h2><h2 id="phan-ket-luan">Phần kết luận</h2><p>Tôi hy vọng hướng dẫn này sẽ giúp bạn hiểu cách hoạt động của sự kiện nhấp chuột trong JavaScript. Chúng tôi đã khám phá hai phương pháp khác nhau ở đây, vì vậy bây giờ bạn có thể bắt đầu sử dụng chúng trong các dự án viết mã của mình</p><p>Cảm ơn bạn đã đọc và tiếp tục mã hóa</p><p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p></p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><p><p>QUẢNG CÁO</p><hr><p><section><div class="imgBox"><img alt="JS onclick CSS" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/js-onclick-css---aHR0cHM6Ly9pMC53cC5jb20vd3d3LmZyZWVjb2RlY2FtcC5vcmcvbmV3cy9jb250ZW50L2ltYWdlcy9zaXplL3c2MC8yMDIzLzAxL2tvbGFkZS1yZWNlbnQuanBn.webp" ></div><section><span>Kolade Chris</span><p>Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng</p></section></section></p><hr><p>Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn</p><p><p>Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu</p><div></div> <div></div> <h3 id="ban-co-the-su-dung-onclick-trong-css-khong">Bạn có thể sử dụng onclick trong CSS không?</h3> <div><span>Để sử dụng CSS onClick, về cơ bản, bạn cần tạo một lớp giả</span> . 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. </div> <h3 id="lam-cach-nao-de-dat-chuc-nang-onclick-trong-javascript">Làm cách nào để đặt chức năng onclick trong JavaScript?</h3> <div>Để đặt onclick bằng JavaScript, có hai cách tiếp cận khác nhau, cách thứ nhất là <span>gán giá trị cho thuộc tính onclick của phần tử HTML bằng JavaScript</span> and the second approach is to explicitly add an event listener on the HTML event which checks for the “click” event.</div> <h3 id="lam-cach-nao-de-bat-su-kien-onclick-trong-javascript">Làm cách nào để bật sự kiện onclick trong JavaScript?</h3> <div><div><span>Sự kiện onclick</span> . </div> <div>Thí dụ. Gọi một chức năng khi một nút được bấm. . </div> <div>In HTML: <element onclick="myScript">.</div> <div>Click a <button> to display the date: .. .</div> <div>Click a <h3 id="element-to-change-the-text-color-mot-vi-du-khac-ve-cach-thay-doi-mau-cua-mot-phan-tu-nhap-de-sao-chep-van-ban-tu-truong-nhap-lieu-nay-sang-truong-nhap-lieu-khac-onclick-co-thuc-hanh-tot-khong"> element to change the text color: .. . Một ví dụ khác về cách thay đổi màu của một phần tử. . Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác Onclick có thực hành tốt không?</h3> <div>onClick() trong HTML là một phương thức được cung cấp trong phần tử dưới dạng một thuộc tính. Giá trị của nó có thể là hàm JavaScript hoặc tập lệnh được thực thi sau khi sự kiện nhấp chuột xảy ra trên phần tử đó. Nhưng phương pháp này có một số nhược điểm, đó là lý do <span>phương pháp này bị coi là một phương pháp không tốt</span> . </div></p></td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/qbQRyq7VEBc?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen>