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
Các yếu tố
Hey there!!
2 về bản chất là không tương tác. Javascript truyền sức sống vào nó bằng cách làm cho nó có tính tương tác. Chúng tôi có thể cần viết lại văn bản được hiển thị bởi một Hey there!!
2. Chẳng hạn, trong khi triển khai chức năng Chỉnh sửa, chúng tôi có thể sử dụng lại các màn hình được thiết kế để phát triển tính năng Thêm. Chỉ cần thay đổi từ ngữ. Đối với chức năng Thêm, chúng tôi có thể cần phải viết lại từ khóa Hey there!!
4 của một nút thành Hey there!!
5, v.v. Chúng ta hãy xem xét một vài cách để chúng ta có thể thay đổi văn bản của div một cách linh hoạtThay đổi văn bản Hey there!!
2 bằng thuộc tính Hey there!!
7
Hey there!!
Hey there!!
Không giống như các ngôn ngữ lập trình khác, chúng tôi không sử dụng các phương thức getter và setter để đặt văn bản thành các phần tử HTML. Đối tượng phần tử HTML cho div có một thuộc tính được gọi là
Hey there!!
7. Chúng ta có thể sử dụng nó để lấy và thiết lập nội dung của đối tượng HTML. Ở đây đối tượng HTML sẽ hoạt động. Nghĩa là, nó phản ánh bất kỳ thay đổi nào đối với thuộc tính phần tử trong trình duyệt khi làm mớiSau đây là cú pháp sử dụng InternalHTML
________số 8_______
Trong đoạn mã trên, chúng tôi nhận được nội dung của một phần tử HTML
Hey there!!
2 bằng cách sử dụng window.onload = function[] {
document.getElementById["div-element"].innerHTML = "Hello World!!";
console.log[document.getElementById["div-element"].innerHTML];
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!";
console.log[document.getElementById["div-element"].innerHTML];
}
0. Ở đây, window.onload = function[] {
document.getElementById["div-element"].innerHTML = "Hello World!!";
console.log[document.getElementById["div-element"].innerHTML];
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!";
console.log[document.getElementById["div-element"].innerHTML];
}
1 là đối tượng HTML thực tế. Tương tự, chúng ta có thể đặt nội dung thành Hey there!!
2 bằng cách sử dụng thuộc tính tương tự, ____1_______7 của phần tử. Chúng ta chỉ gán nội dung văn bản cho Hey there!!
7Hey there!!
window.onload = function[] {
document.getElementById["div-element"].innerHTML = "Hello World!!";
console.log[document.getElementById["div-element"].innerHTML];
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!";
console.log[document.getElementById["div-element"].innerHTML];
}
đầu ra
Hello World!!
Hello bunny!!
Trước khi áp dụng
window.onload = function[] {
document.getElementById["div-element"].innerHTML = "Hello World!!";
console.log[document.getElementById["div-element"].innerHTML];
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!";
console.log[document.getElementById["div-element"].innerHTML];
}
5, chúng ta cần chọn phần tử HTML. Chúng ta có thể làm điều đó theo nhiều cách khác nhau. Javascript có nhiều chức năng mà chúng ta có thể sử dụng để truy vấn các phần tử từ DOM. Sau đây là một số phương pháp được sử dụng phổ biến nhất
6. Chức năng này của giao diệnwindow.onload = function[] { document.getElementById["div-element"].innerHTML = "Hello World!!"; console.log[document.getElementById["div-element"].innerHTML]; var el = document.getElementById["div-element"]; el.textContent = "Hello bunny!!"; console.log[document.getElementById["div-element"].innerHTML]; }
7 được sử dụng để chọn một phần tử từwindow.onload = function[] { document.getElementById["div-element"].innerHTML = "Hello World!!"; console.log[document.getElementById["div-element"].innerHTML]; var el = document.getElementById["div-element"]; el.textContent = "Hello bunny!!"; console.log[document.getElementById["div-element"].innerHTML]; }
8 bằng cách sử dụngwindow.onload = function[] { document.getElementById["div-element"].innerHTML = "Hello World!!"; console.log[document.getElementById["div-element"].innerHTML]; var el = document.getElementById["div-element"]; el.textContent = "Hello bunny!!"; console.log[document.getElementById["div-element"].innerHTML]; }
9 của nó, được chỉ định trong HTML. Hàm trả về đối tượng HTML tương ứng với phần tử được chọnwindow.onload = function[] { document.getElementById["div-element"].innerHTML = "Hello World!!"; console.log[document.getElementById["div-element"].innerHTML]; var el = document.getElementById["div-element"]; el.textContent = "Hello bunny!!"; console.log[document.getElementById["div-element"].innerHTML]; }
0. Chúng ta có thể truy vấn phần tử dựa trênHello World!! Hello bunny!!
1 với hàmHello World!! Hello bunny!!
0. Nhiều phần tử được trả về dưới dạng một mảng các đối tượng HTML theo phương thức javascript nàyHello World!! Hello bunny!!
3. Có một cách khác để chọn các phần tử có thuộc tínhHello World!! Hello bunny!!
4. Chúng tôi chỉ định thuộc tính tên cho nút trong HTML. Phương thức này trả về một mảng gồmHello World!! Hello bunny!!
5 đối tượng. Chúng tôi có thể sử dụng nó, đặc biệt nếu chúng tôi quan tâm đến việc chọn nhiều thành phần với một kiểu, lớp CSS cụ thể và hành động theo tất cả chúng cùng một lúcHello World!! Hello bunny!!
6. Chúng ta cũng có thể chọn phần tử dựa trên các thẻ HTML của chúng bằng hàmHello World!! Hello bunny!!
7. Chẳng hạn, chúng ta có thể thực hiện một số thao tác trên tất cả các phần tửHello World!! Hello bunny!!
2 trong một phần củaHey there!!
8, v.v. Như tên gợi ý, hàm trả về một mảng gồmwindow.onload = function[] { document.getElementById["div-element"].innerHTML = "Hello World!!"; console.log[document.getElementById["div-element"].innerHTML]; var el = document.getElementById["div-element"]; el.textContent = "Hello bunny!!"; console.log[document.getElementById["div-element"].innerHTML]; }
5 đối tượngHello World!! Hello bunny!!
1. HàmHey there!!
1 trong Javascript chung chung hơn một chút và có thể được sử dụng để chọn các phần tửHey there!!
5 vớiHello World!! Hello bunny!!
4. Hàm trả về phần tử đầu tiên thỏa mãn điều kiện được truyền trong tham số của nóHey there!!
5. Cái này tương tự như cáiHey there!!
1, với điểm khác biệt duy nhất là nó sẽ trả về nhiều hơn một phần tử thỏa mãn định dạngHey there!!
4 được truyền dưới dạng tham số cho nóHey there!!
Thay đổi nội dung của Div với thuộc tính nút Hey there!!
8
Hey there!!
Mặc dù chúng tôi sử dụng
Hey there!!
7 khá thường xuyên, vẫn có rủi ro bảo mật liên quan đến việc sử dụng nó. Nó liên quan đến cách Hey there!!
7 thay thế nội dung của phần tử Hello World!!
Hello bunny!!
5. Thuộc tính Hey there!!
7 loại bỏ tất cả các nút HTML phụ trong một lần chụp và thêm nội dung mới như được chỉ định trong đóRủi ro bảo mật xuất hiện khi thuộc tính
Hey there!!
7 cho phép chúng tôi chèn bất kỳ đoạn mã HTML nào, ngay cả khi đó là mã có hại. Chúng ta sẽ thảo luận về khía cạnh này trong phần tiếp theo. MDN khuyến nghị sử dụng window.onload = function[] {
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!"
}
4 để thay đổi văn bản của một phần tử. Nó thay thế các nút con bên trong HTML bằng window.onload = function[] {
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!"
}
5 mà chúng tôi gán trong tham số Hey there!!
8. Tham khảo đoạn mã sau để hiểu cách sử dụngHey there!!
window.onload = function[] {
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!"
}
đầu ra
Ở đây, chúng tôi chọn phần tử HTML,
Hey there!!
2, trước khi thay đổi văn bản. Chúng tôi sử dụng hàm window.onload = function[] {
document.getElementById["div-element"].innerHTML = "Hello World!!";
console.log[document.getElementById["div-element"].innerHTML];
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!";
console.log[document.getElementById["div-element"].innerHTML];
}
6 để truy vấn phần tử từ DOM. Sau đó, chúng tôi sử dụng Hey there!!
8 để thay đổi văn bản của Hey there!!
2. Thay đổi này sẽ không được phân biệt khi tải màn hình. Ngay khi trình duyệt tải trang web, hàm
1 được thực thi và thay đổi văn bản sẽ xảy ra. Vì vậy, người dùng cuối luôn nhìn thấy văn bản mới hơn. Việc thay đổi văn bản cũ thành văn bản mới không rõ ràng khi tải màn hình. Chúng ta cũng có thể sử dụng phương thức Hey there!!
8 bên trong phương thức
3 để xem sự thay đổiInnerhtml Vs _______ 56 _______ 4 Khía cạnh bảo mật
Thuộc tính
Hey there!!
7 khác với thuộc tính Hey there!!
8. Cả hai thuộc tính đều lấy window.onload = function[] {
var el = document.getElementById["div-element"];
el.textContent = "Hello bunny!!"
}
5 làm đầu vào, nhưng lỗ hổng bảo mật ở đây là gì? . Tham khảo đoạn mã sau. Tại đây, sự thay đổi được phản ánh và mã InternalHTML sẽ được thực thi. Như được hiển thị trong đoạn mã sau, khi nhấp vào phần tử HTML Hey there!!
2 màu lục nhạt, một 0 không mong muốn sẽ bật lên trên màn hìnhwindow.onload = function[] { var el = document.getElementById["div-element"]; el.innerHTML = `
`; }
window.onload = function[] { var el = document.getElementById["div-element"]; el.innerHTML = `
`; }
Nếu chúng ta chỉ định cùng một nội dung trong phần tử
Hey there!!
8 cho phần tử Hey there!!
2, nó sẽ không hiển thị phần tử đó dưới dạng phần tử HTML. Javascript hiển thị nội dung dưới dạng văn bản trên màn hình. Vì vậy, chúng ta có thể thấy theo nghĩa đenhiển thị dưới dạng văn bản trong trang web. Khía cạnh này làm cho mã an toàn và đáng tin cậy hơn. Do đó, nếu chúng ta có ý định thay đổi văn bản của một phần tử HTML, thì các phương pháp hay nhất về Javascript [do MDN hỗ trợ] khuyên bạn nên sử dụng thuộc tính
Hey there!!
8 thay vì thuộc tính Hey there!!
7
window.onload = function[] { var el = document.getElementById["div-element"]; el.textContent = `
`; }
Thay đổi văn bản Hey there!!
2 bằng phần tử giả window.onload = function[] {
var el = document.getElementById["div-element"];
el.innerHTML = `
`;
}
6
Hey there!!
window.onload = function[] {
var el = document.getElementById["div-element"];
el.innerHTML = `
`;
}
Nếu thay đổi văn bản là không đáng kể, chúng ta có thể sử dụng CSS để thay đổi văn bản
Hey there!!
2. Chúng tôi sử dụng phần tử HTML giả 6, trong đó chúng tôi thêm văn bản mà chúng tôi muốn hiển thị trong thuộc tínhwindow.onload = function[] { var el = document.getElementById["div-element"]; el.innerHTML = `
`; }
9. Nó không áp dụng cho các phần tử HTML nhưwindow.onload = function[] { var el = document.getElementById["div-element"]; el.innerHTML = `
`; }
0 khi trình duyệt thay thế nội dung bằng hình ảnh được tải. Đoạn mã sau chi tiết cách sử dụng