Cách thay đổi nội dung div động trong JavaScript
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 Show
Kết quả của người họcKhi hoàn thành bài tập này
Các hoạt độngThô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 onclick Đầ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ố 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 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 4 của một nút thành 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!! 7Khô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à 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 2 bằng cách sử dụng 0. Ở đây, 1 là đối tượng HTML thực tế. Tương tự, chúng ta có thể đặt nội dung thành 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 7
đầu ra
Trước khi áp dụng 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
Thay đổi nội dung của Div với thuộc tính nút Hey there!! 8Mặc dù chúng tôi sử dụng 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 7 thay thế nội dung của phần tử 5. Thuộc tính 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 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 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 5 mà chúng tôi gán trong tham số 8. Tham khảo đoạn mã sau để hiểu cách sử dụng
đầu ra Ở đây, chúng tôi chọn phần tử HTML, 2, trước khi thay đổi văn bản. Chúng tôi sử dụng hàm 6 để truy vấn phần tử từ DOM. Sau đó, chúng tôi sử dụng 8 để thay đổi văn bản của 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 8 bên trong phương thức 3 để xem sự thay đổiInnerhtml Vs _______ 56 _______ 4 Khía cạnh bảo mậtThuộc tính 7 khác với thuộc tính 8. Cả hai thuộc tính đều lấy 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 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ình
Nếu chúng ta chỉ định cùng một nội dung trong phần tử 8 cho phần tử 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 8 thay vì thuộc tính 7
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 = ``; } 6Nế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 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ính 9. Nó không áp dụng cho các phần tử HTML như 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
Làm cách nào để thay đổi nội dung div bằng JavaScript?Một cách để thay thế văn bản bên trong phần tử div bằng JavaScript là đặt thuộc tính innerHTML của phần tử thành một giá trị khác . div. innerHTML = "Văn bản mới của tôi. "; để chọn div với querySelector.
Làm cách nào để thay đổi văn bản động trong JavaScript?Tạo phần tử nhãn và gán id cho phần tử đó Xác định một nút được sử dụng để gọi một chức năng. Nó hoạt động như một công tắc để thay đổi văn bản trong phần tử nhãn Xác định hàm javaScript, hàm này sẽ cập nhật văn bản nhãn Sử dụng thuộc tính innerHTML để thay đổi văn bản bên trong nhãn Làm cách nào để thay thế một div bằng một div khác trong JavaScript?Làm cách nào để thay thế div bằng một div khác trong javascript? . Đầu tiên sao chép div mong muốn Thứ hai làm trống div chính Thứ ba thêm bản sao vào div chính Làm cách nào để thay đổi nội dung bằng JavaScript?Cách dễ nhất để sửa đổi nội dung của phần tử HTML là sử dụng thuộc tính innerHTML. . The HTML document above contains an element with id="id01".Chúng tôi sử dụng HTML DOM để lấy phần tử có id="id01" JavaScript thay đổi nội dung ( innerHTML ) của phần tử đó thành "Tiêu đề mới" |