Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo
Kết quả của người học
Khi hoàn thành bài tập này
- bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
- bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML
Các hoạt động
Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ
mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu
Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành
Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện title
Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào
Hiển thị đồng hồ
Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript [bạn sẽ hiểu tại sao trong giây lát]
Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock[], bạn cần tạo một hàm toggleClock[]. Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn
function toggleClock[] {
// get the clock
var myClock = document.getElementById['clock'];
// get the current value of the clock's display property
var displaySetting = myClock.style.display;
// also get the clock button, so we can change what it says
var clockButton = document.getElementById['clockButton'];
// now toggle the clock and the button text, depending on current state
if [displaySetting == 'block'] {
// clock is visible. hide it
myClock.style.display = 'none';
// change button text
clockButton.innerHTML = 'Show clock';
}
else {
// clock is hidden. show it
myClock.style.display = 'block';
// change button text
clockButton.innerHTML = 'Hide clock';
}
}
Trong hàm toggleClock[] mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản [HTML bên trong] trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào
Tất cả đã được làm xong?
Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo
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
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
Đầu tiên, chúng ta sẽ xem xét phong cách
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
Cách sử dụng sự kiện
freeCodeCamp
Change to Blue
4 trong JavaScript
freeCodeCamp
Change to Blue
Sự kiện
freeCodeCamp
Change to Blue
Bạn đặt hàm JavaScript mà bạn muốn thực thi bên trong thẻ mở của nút
Cú pháp
freeCodeCamp
Change to Blue
4 cơ bản
freeCodeCamp
Change to Blue
Click
Ví dụ
Click
Lưu ý rằng thuộc tính
freeCodeCamp
Change to Blue
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]
Ví dụ sự kiện
freeCodeCamp
Change to Blue
4
freeCodeCamp
Change to Blue
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
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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ụ
freeCodeCamp
Change to Blue
Vì vậy, trên trang web, đây là những gì chúng ta có
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
freeCodeCamp
Change to Blue
Vì vậy, chúng tôi cần thực hiện một thay đổi nhỏ trong HTML của mình
freeCodeCamp
Change to Blue
Chức năng chúng tôi muốn thực hiện là
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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
freeCodeCamp
Change to Blue
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
freeCodeCamp
Change to Blue
Bây giờ, hãy viết hàm
freeCodeCamp
Change to Blue
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ẻ
freeCodeCamp
Change to Blue
Trong JavaScript, bạn làm điều đó với các phương thức
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
Trong hướng dẫn này, tôi sẽ sử dụng
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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
freeCodeCamp
Change to Blue
Vì vậy, hãy viết chức năng của chúng tôi
freeCodeCamp
Change to Blue
Điều gì đang xảy ra?
Hãy nhớ từ HTML rằng
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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.
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
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
Mã của chúng tôi đang hoạt động
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
Click
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
Khoảng thời gian này, các hàm
freeCodeCamp
Change to Blue
Trang web của chúng tôi đã thay đổi một chút
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
Click
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ỳ màu nào chúng tôi đã chuyển vào các hàm
freeCodeCamp
Change to Blue
Cách sử dụng nhấp chuột
freeCodeCamp
Change to Blue
49 trong JavaScript
freeCodeCamp
Change to Blue
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
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 title, nhưng hãy thực hiện một cách tiếp cận khác tại đây
Cú pháp
freeCodeCamp
Change to Blue
49 cơ bản
freeCodeCamp
Change to Blue
Click
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
Đây là HTML mới của chúng tôi
Click
Và đây là những gì nó trông giống như
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
Vì vậy, kịch bản của chúng tôi trông như thế này
Click
Chúng tôi cũng có thể tách hoàn toàn chức năng của mình khỏi
freeCodeCamp
Change to Blue
Click
Cách xây dựng nút "Hiển thị thêm" và "Hiển thị ít hơn" bằng JavaScript
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ề
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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 đó
Đây là HTML chúng tôi đang xử lý
Click
Đó 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
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
Không có CSS, đây là những gì chúng ta có
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
Click
CSS đang làm gì?
Với bộ chọn chung [
freeCodeCamp
Change to Blue
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
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
Phần tử
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
Các thẻ đoạn bên trong nó có kích thước phông chữ là 18px và sau đó chúng tôi đã cung cấp cho chúng chiều cao tối đa là
freeCodeCamp
Change to Blue
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 ________ 180 đề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
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
Bộ chọn của chúng tôi,
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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à ________ 187 để nó có đường viền hơi tròn
Cuối cùng, chúng tôi đã sử dụng lớp giả
freeCodeCamp
Change to Blue
Chúng ta bắt đầu – đó là CSS
Trang của chúng tôi bây giờ trông đẹp hơn
Đ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
Chúng tôi có một thuộc tính
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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ó
Click
Điều tiếp theo chúng ta cần làm là viết hàm
freeCodeCamp
Change to Blue
Click
Chức năng đang làm gì?
Chúng tôi sử dụng một tuyên bố
freeCodeCamp
Change to Blue
Cú pháp cơ bản trông như thế này
freeCodeCamp
Change to Blue
Ở đâ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
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
Mã của chúng tôi đang hoạt động tốt với quá trình chuyển đổi suôn sẻ
Chúng tôi có thể tách HTML và JavaScript mà vẫn sử dụng
freeCodeCamp
Change to Blue
freeCodeCamp
Change to Blue
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
freeCodeCamp
Change to Blue
Chức năng của chúng tôi vẫn giữ nguyên
Video Giải thích về Nút HTML title
Phần kết luận
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
Cảm ơn bạn đã đọc và tiếp tục mã hóa
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
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
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
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