Hướng dẫn javascript.info ebook part 2 - ebook javascript.info phần 2
|
Permalink bậc thầy Chuyển nhánh/thẻ
Không thể tải các nhánh Không có gì để hiển thị {{refname}}
Tên đã được sử dụngMột thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh GIT chấp nhận cả tên thẻ và tên chi nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi bất ngờ. Bạn có chắc là bạn muốn tạo chi nhánh này? Đi nộp
Không thể lấy lại những người đóng góp tại thời điểm này 3,65 MB Tải xuống
Xin lỗi, có lỗi xảy ra. Tải lại? Xin lỗi, chúng tôi không thể hiển thị tệp này. Xin lỗi, tệp này không hợp lệ nên nó không thể được hiển thị. Mục lục: Môi trường trình duyệt, Thông số kỹ thuật ...... Trang 4DO cây ...... Trang 7 : Nhập, thẻ và nội dung ...... Trang 36Attributes và Thuộc tính ...... Trang 50 Điều chỉnh tài liệu ...... trang 60Style và lớp học ...... trang 79 Kích thước và cuộn ... ... Trang 87 Kích thước và cuộn kích thước và cuộn ...... trang 102Coordinates ...... trang 106 Giới thiệu sự kiện ...... trang 116 Giới thiệu cho các sự kiện của trình duyệt ...... trang 117bubble và chụp ... ... Trang 132Event Phái đoàn ...... Trang 139Browser Hành động mặc định ...... Trang 150Dispatching Sự kiện tùy chỉnh ...... Trang 159 Sự kiện cơ bản /leave......Page 173Drag'n'drop với các sự kiện chuột ...... trang 180Keyboard: Keydown và Keyup ...... trang 189Scrolling ...... trang 195Forms, điều khiển ... ... Trang 198 Tính chất và phương pháp ...... Trang 199F Focusing: Focus/Blur ...... Trang 206Events: Thay đổi, đầu vào, cắt, sao chép, dán ...... trang 213Forms: thậm chí T và Phương thức Gửi ...... trang 217 Trang: DomContentLoaded, Tải, trước khiun, dỡ tải ...... trang 220Scripts: Async, Defer ...... Trang 227Resource Tải: onload và onerror ..... .Page 232Muting Observer ...... trang 238Selection và phạm vi ...... Trang 244Event Vòng lặp: microtasks và macrotasks ...... trang 259 . Hiển thị hậu duệ trên cây để nối văn bản cho từng Chúng ta có thể thay đổi dữ liệu nút văn bản. Mở giải pháp trong hộp cát. Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... Tạo một lịch mà chúng tôi sẽ tạo bảng dưới dạng một chuỗi: " ... ", và sau đó gán nó cho bên trong. Thuật toán: 1. Tạo tiêu đề bảng với và tên ngày trong tuần. 2. Tạo đối tượng ngày d = ngày mới (năm, tháng 1). Đó là ngày đầu tiên của tháng (có tính đến các tháng trong JavaScript bắt đầu từ 0, không phải 1). 3. Một vài tế bào đầu tiên cho đến ngày đầu tiên của tháng D.GetDay () có thể trống. Hãy để chúng điền vào chúng với đến lịch. Nếu đó là một ngày chủ nhật, sau đó thêm một dòng mới vào đó, để làm cho nó vuông. Mở giải pháp trong hộp cát. Đồng hồ màu với SetInterval trước, hãy để HTML/CSS. Mỗi thành phần của thời gian sẽ trông tuyệt vời trong riêng của mình: Phần 2 Trình duyệt: tài liệu, sự kiện, giao diện Ilya Kantor Được xây dựng vào ngày 10 tháng 7 năm 2019 Phiên bản cuối cùng của hướng dẫn là tại https://javascript.info. Chúng tôi liên tục làm việc để cải thiện hướng dẫn. Nếu bạn tìm thấy bất kỳ sai lầm, xin vui lòng viết tại GitHub của chúng tôi. ● ● // Thay đổi màu nền thành tài liệu màu đỏ.body.style.background = "màu đỏ"; // Thay đổi nó trở lại sau 1 giây setTimeout (() => document.body.style.background = "", 1000); Ở đây chúng tôi đã sử dụng document.body.style, nhưng có rất nhiều, nhiều hơn nữa. Các thuộc tính và phương thức được mô tả trong đặc điểm kỹ thuật: ● Tiêu chuẩn sống của Dom tại https://dom.spec.whatwg.org DOM không chỉ dành cho trình duyệt Thông số kỹ thuật DOM giải thích cấu trúc của một tài liệu và cung cấp các đối tượng để thao tác nó. Có những dụng cụ không phải là các công cụ sử dụng nó quá. Chẳng hạn, các công cụ phía máy chủ tải xuống các trang HTML và xử lý chúng sử dụng DOM. Họ có thể chỉ hỗ trợ một phần của đặc điểm kỹ thuật mặc dù. DOM không chỉ dành cho trình duyệt Thông số kỹ thuật DOM giải thích cấu trúc của một tài liệu và cung cấp các đối tượng để thao tác nó. Có những dụng cụ không phải là các công cụ sử dụng nó quá. Chẳng hạn, các công cụ phía máy chủ tải xuống các trang HTML và xử lý chúng sử dụng DOM. Họ có thể chỉ hỗ trợ một phần của đặc điểm kỹ thuật mặc dù. CSSOM cho kiểu dáng Các quy tắc và kiểu dáng CSS không được cấu trúc như HTML. Có một đặc điểm kỹ thuật riêng biệt CSSOM giải thích cách chúng được biểu diễn dưới dạng đối tượng và cách đọc và viết chúng. CSSOM được sử dụng cùng với DOM khi chúng tôi sửa đổi các quy tắc kiểu cho tài liệu. Trong thực tế, CSSOM hiếm khi được yêu cầu, bởi vì thông thường các quy tắc CSS là tĩnh. Chúng tôi hiếm khi cần thêm/loại bỏ các quy tắc CSS khỏi JavaScript, vì vậy chúng tôi đã giành chiến thắng ngay bây giờ. BOM (Mô hình đối tượng Trình duyệt) Mô hình đối tượng Trình duyệt (BOM) là các đối tượng bổ sung được cung cấp bởi trình duyệt (môi trường máy chủ) để hoạt động với mọi thứ ngoại trừ tài liệu. Ví dụ: ● ● DOM không chỉ dành cho trình duyệt Thông số kỹ thuật DOM giải thích cấu trúc của một tài liệu và cung cấp các đối tượng để thao tác nó. Có những dụng cụ không phải là các công cụ sử dụng nó quá. Chẳng hạn, các công cụ phía máy chủ tải xuống các trang HTML và xử lý chúng sử dụng DOM. Họ có thể chỉ hỗ trợ một phần của đặc điểm kỹ thuật mặc dù. CSSOM cho kiểu dáng Các quy tắc và kiểu dáng CSS không được cấu trúc như HTML. Có một đặc điểm kỹ thuật riêng biệt CSSOM giải thích cách chúng được biểu diễn dưới dạng đối tượng và cách đọc và viết chúng. CSSOM được sử dụng cùng với DOM khi chúng tôi sửa đổi các quy tắc kiểu cho tài liệu. Trong thực tế, CSSOM hiếm khi được yêu cầu, bởi vì thông thường các quy tắc CSS là tĩnh. Chúng tôi hiếm khi cần thêm/loại bỏ các quy tắc CSS khỏi JavaScript, vì vậy chúng tôi đã giành chiến thắng ngay bây giờ. BOM (Mô hình đối tượng Trình duyệt) Mô hình đối tượng Trình duyệt (BOM) là các đối tượng bổ sung được cung cấp bởi trình duyệt (môi trường máy chủ) để hoạt động với mọi thứ ngoại trừ tài liệu. Ví dụ: ● ● Đối tượng Navigator cung cấp thông tin cơ bản về trình duyệt và hệ điều hành. Có nhiều thuộc tính, nhưng hai thuộc tính được biết đến rộng rãi nhất là: navigator.useragent - về trình duyệt hiện tại và navigator.platform - về nền tảng (có thể giúp khác biệt giữa Windows/Linux/Mac, v.v.). Vị trí Đối tượng cho phép chúng tôi đọc URL hiện tại và có thể chuyển hướng trình duyệt đến một trình duyệt mới. Ở đây, cách chúng ta có thể sử dụng đối tượng vị trí: cảnh báo (vị trí.href); // hiển thị url hiện tại if (xác nhận ("Truy cập wikipedia?")) {vị trí.href = "https://wikipedia.org"; // Chuyển hướng trình duyệt sang URL khác} Các chức năng Cảnh báo/Xác nhận/Lời nhắc cũng là một phần của BOM: chúng không liên quan trực tiếp đến tài liệu, nhưng đại diện cho các phương thức giao tiếp Trình duyệt thuần túy với người dùng. BOM là một phần của đặc tả HTML chung . Có, bạn nghe nói rằng ngay. Thông số kỹ thuật HTML tại https://html.spec.whatwg.org không chỉ về ngôn ngữ HT HTML (thẻ, thuộc tính), mà còn bao gồm một loạt các đối tượng, phương thức và phần mở rộng DOM dành riêng cho trình duyệt. Đó là "HTML trong rộng điều kiện". Ngoài ra, một số phần có thông số kỹ thuật bổ sung được liệt kê tại https://spec.whatwg.org. Tóm tắt Nói về các tiêu chuẩn, chúng tôi có: Đặc điểm kỹ thuật của DOM mô tả cấu trúc tài liệu, thao tác và sự kiện, xem https://dom.spec.whatwg.org. Thông số kỹ thuật CSSOM mô tả các kiểu dáng và quy tắc kiểu, thao tác với chúng và liên kết của chúng với các tài liệu, xem https://www.w3.org/tr/cssom-1/. Thông số kỹ thuật HTML mô tả ngôn ngữ HTML (ví dụ: thẻ) và cả BOM (mô hình đối tượng trình duyệt) - Các hàm trình duyệt khác nhau: SetTimeout, ALERT, Vị trí, v.v., xem https://html.spec.whatwg.org. Nó lấy đặc điểm kỹ thuật của DOM và mở rộng nó với nhiều thuộc tính và phương thức bổ sung. Ngoài ra, một số lớp được mô tả riêng biệt tại https://spec.whatwg.org/. Xin lưu ý các liên kết này, vì có rất nhiều thứ để tìm hiểu nó không thể bao gồm và nhớ mọi thứ. Khi bạn muốn đọc về một tài sản hoặc một phương thức, hướng dẫn sử dụng mozilla tại https://developer.mozilla.org/en-us/search cũng là một tài nguyên đẹp, nhưng thông số kỹ thuật tương ứng có thể tốt hơn: nó phức tạp và dài hơn để đọc, nhưng sẽ làm cho kiến thức cơ bản của bạn âm thanh và đầy đủ. Để tìm một cái gì đó, thường rất thuận tiện khi sử dụng một tìm kiếm trên internet, whatwg [thuật ngữ] hoặc hoặc mdn [thuật ngữ], ví dụ, https://google.com? Q = mdn+LocalStorage. Bây giờ chúng tôi sẽ xuống học tập DOM, bởi vì tài liệu đóng vai trò trung tâm trong UI. Xin lưu ý các ký tự đặc biệt trong các nút văn bản: ● Một dòng mới: ↵ (trong JavaScript được gọi là \ n) ● một không gian: ␣ Spaces và Newlines - là các ký tự hoàn toàn hợp lệ, chúng tạo thành các nút văn bản và trở thành một phần của DOM. Vì vậy, ví dụ, trong ví dụ trên thẻ chứa một số khoảng trống trước đó và văn bản đó trở thành nút #Text (nó chỉ chứa một dòng mới và một số không gian). Chỉ có hai loại trừ cấp cao nhất: 1. Không gian và dòng mới trước đây bị bỏ qua vì lý do lịch sử, 2. Nếu chúng ta đặt một cái gì đó sau đó, thì điều đó sẽ tự động di chuyển bên trong cơ thể Phải ở bên trong. Vì vậy, có thể không có không gian sau. Trong các trường hợp khác, mọi thứ đều đơn giản - nếu có không gian (giống như bất kỳ ký tự nào) trong tài liệu, thì chúng trở thành nút văn bản trong DOM và nếu chúng ta xóa chúng, thì sẽ giành được bất kỳ. Dưới đây không có nút văn bản chỉ có không gian: Về sự thật về Elks. elem.style.backgroundcolor z-index => elem.style.zindex biên giới-left-width => elem.style.borderleftwidth Ví dụ: document.body.style.backgroundColor = prompt ('màu nền?', 'màu xanh lá cây'); Thuộc tính tiền tố Các thuộc tính có trình duyệt như -moz-Border-Radius, -webkitbandder-Radius cũng tuân theo quy tắc tương tự, ví dụ: bettyle.style.mozbeterradius = '5px'; nút.style.webkitborderradius = '5px'; Đó là: một dấu gạch ngang "-" trở thành một chữ hoa. Đặt lại thuộc tính kiểu đôi khi chúng tôi muốn gán một thuộc tính kiểu, và sau đó xóa nó. Chẳng hạn, để ẩn một phần tử, chúng ta có thể đặt elem.style.display = "none". Sau đó, chúng ta có thể muốn loại bỏ style.display như thể nó không được đặt. Thay vì xóa elem.style.display, chúng ta nên gán một chuỗi trống cho nó: elem.style.display = "". // Nếu chúng tôi chạy mã này, tài liệu "nhấp nháy ".body.style.display =" none "; // Ẩn setTimeout (() => document.body.style.display = "", 1000); // trở lại bình thường Nếu chúng tôi đặt hiển thị thành một chuỗi trống, thì trình duyệt áp dụng các lớp CSS và các kiểu tích hợp của nó một cách thông thường, như thể không có thuộc tính hiển thị như vậy. Thuộc tính tiền tố Các thuộc tính có trình duyệt như -moz-Border-Radius, -webkitbandder-Radius cũng tuân theo quy tắc tương tự, ví dụ: bettyle.style.mozbeterradius = '5px'; nút.style.webkitborderradius = '5px'; Đó là: một dấu gạch ngang "-" trở thành một chữ hoa. Đặt lại thuộc tính kiểu đôi khi chúng tôi muốn gán một thuộc tính kiểu, và sau đó xóa nó. Chẳng hạn, để ẩn một phần tử, chúng ta có thể đặt elem.style.display = "none". Sau đó, chúng ta có thể muốn loại bỏ style.display như thể nó không được đặt. Thay vì xóa elem.style.display, chúng ta nên gán một chuỗi trống cho nó: elem.style.display = "". // Nếu chúng tôi chạy mã này, tài liệu "nhấp nháy ".body.style.display =" none "; // Ẩn setTimeout (() => document.body.style.display = "", 1000); // trở lại bình thường Nếu chúng tôi đặt hiển thị thành một chuỗi trống, thì trình duyệt áp dụng các lớp CSS và các kiểu tích hợp của nó một cách thông thường, như thể không có thuộc tính hiển thị như vậy. Viết lại đầy đủ với style.csstext Thông thường, chúng tôi sử dụng phong cách.* Để gán các thuộc tính kiểu riêng lẻ. Chúng ta có thể thiết lập phong cách đầy đủ như div.style = "color: red; width: 100px", vì div.style là một đối tượng và nó chỉ đọc. Để đặt phong cách đầy đủ thành một chuỗi, có một kiểu thuộc tính đặc biệt.csstext: nút Thuộc tính này hiếm khi được sử dụng, bởi vì bài tập như vậy sẽ loại bỏ tất cả các kiểu hiện có: nó không thêm, nhưng thay thế chúng. Đôi khi có thể xóa một cái gì đó cần thiết. Nhưng chúng ta có thể sử dụng nó một cách an toàn cho các yếu tố mới, khi chúng ta biết rằng chúng ta đã thắng xóa một phong cách hiện có. Điều tương tự có thể được thực hiện bằng cách đặt một thuộc tính: Div.SetAttribution ('Style', 'Color: Red ...'). Tâm trí các đơn vị Các đơn vị CSS phải được cung cấp trong các giá trị kiểu. Chẳng hạn, chúng ta không nên đặt elem.style.top thành 10, mà là 10px. Nếu không thì nó sẽ hoạt động: Thuộc tính tiền tố Các thuộc tính có trình duyệt như -moz-Border-Radius, -webkitbandder-Radius cũng tuân theo quy tắc tương tự, ví dụ: bettyle.style.mozbeterradius = '5px'; nút.style.webkitborderradius = '5px'; Đó là: một dấu gạch ngang "-" trở thành một chữ hoa. Đặt lại thuộc tính kiểu đôi khi chúng tôi muốn gán một thuộc tính kiểu, và sau đó xóa nó. Chẳng hạn, để ẩn một phần tử, chúng ta có thể đặt elem.style.display = "none". Sau đó, chúng ta có thể muốn loại bỏ style.display như thể nó không được đặt. Thay vì xóa elem.style.display, chúng ta nên gán một chuỗi trống cho nó: elem.style.display = "". // Nếu chúng tôi chạy mã này, tài liệu "nhấp nháy ".body.style.display =" none "; // Ẩn setTimeout (() => document.body.style.display = "", 1000); // trở lại bình thường ⚠ GetComputedStyle yêu cầu tên toàn bộ Chúng ta phải luôn luôn yêu cầu tài sản chính xác mà chúng ta muốn, như paddingleft hoặc margintop hoặc biên giới. Nếu không thì kết quả chính xác không được đảm bảo. Chẳng hạn, nếu có các thuộc tính paddingleft/paddingtop, thì chúng ta nên nhận gì cho getComputedStyle (ELEM) .padding? Không có gì, hoặc có thể là một giá trị được tạo ra trên mạng từ các mái chèo đã biết? Không có quy tắc tiêu chuẩn ở đây. Có những mâu thuẫn khác. Ví dụ, một số trình duyệt (Chrome) hiển thị 10px trong tài liệu bên dưới và một số trong số chúng (Firefox) - không: Các phong cách liên kết đã truy cập vào các liên kết được ẩn! Các liên kết được truy cập có thể được tô màu bằng cách sử dụng: Visit CSS Pseudoclass. Nhưng GetComputedStyle không cung cấp quyền truy cập vào màu đó, bởi vì nếu không, một trang tùy ý có thể tìm hiểu xem người dùng có truy cập liên kết hay không bằng cách tạo nó trên trang và kiểm tra các kiểu. JavaScript có thể không thấy các kiểu được áp dụng bởi: đã truy cập. Ngoài ra, có một giới hạn trong CSS cấm áp dụng các kiểu thay đổi hình học trong: đã truy cập. Điều đó để đảm bảo rằng không có trang nào cho một trang xấu xa để kiểm tra xem một liên kết đã được truy cập và do đó phá vỡ sự riêng tư. Tóm tắt Để quản lý các lớp, có hai thuộc tính DOM: ● ● ClassName - Giá trị chuỗi, tốt để quản lý toàn bộ tập hợp các lớp. Danh sách lớp - đối tượng có các phương thức Thêm/Xóa/Chuyển đổi/Chứa, Tốt cho các lớp riêng lẻ. Để thay đổi các kiểu: ● ● ClassName - Giá trị chuỗi, tốt để quản lý toàn bộ tập hợp các lớp. Danh sách lớp - đối tượng có các phương thức Thêm/Xóa/Chuyển đổi/Chứa, Tốt cho các lớp riêng lẻ. Để thay đổi các kiểu: ● Thuộc tính phong cách là một đối tượng với các kiểu Camelcased. Đọc và viết cho nó có ý nghĩa tương tự như sửa đổi các thuộc tính riêng lẻ trong thuộc tính "kiểu". Để xem cách áp dụng những thứ quan trọng và các thứ hiếm khác - có một danh sách các phương thức tại MDN. Thuộc tính style.csStext tương ứng với toàn bộ thuộc tính "kiểu", chuỗi đầy đủ của các kiểu. Để đọc các kiểu đã được giải quyết (liên quan đến tất cả các lớp, sau khi tất cả các CS được áp dụng và các giá trị cuối cùng được tính toán): ● GetComputedStyle (elem [, giả]) trả về đối tượng giống như kiểu dáng với chúng. Chỉ đọc. Nhiệm vụ tạo ra một tầm quan trọng thông báo: 5 Viết chức năng hiển thị (Tùy chọn) tạo ra một thông báo: với nội dung đã cho. Thông báo Nên tự động biến mất sau 1,5 giây. Các tùy chọn là: // hiển thị một phần tử với văn bản "Xin chào" gần đỉnh bên phải của cửa sổ hiển thị ({top: 10, // 10px từ trên cùng của cửa sổ (theo mặc định 0px) phải: 10, // 10px từ cạnh phải của cửa sổ (theo mặc định 0px) html: "Xin chào!", // HTML của ClassName thông báo: "Chào mừng" // Một lớp bổ sung cho div (tùy chọn)}); Bản demo trong cửa sổ mới Nên tự động biến mất sau 1,5 giây. Các tùy chọn là: // hiển thị một phần tử với văn bản "Xin chào" gần đỉnh bên phải của cửa sổ hiển thị ({top: 10, // 10px từ trên cùng của cửa sổ (theo mặc định 0px) phải: 10, // 10px từ cạnh phải của cửa sổ (theo mặc định 0px) html: "Xin chào!", // HTML của ClassName thông báo: "Chào mừng" // Một lớp bổ sung cho div (tùy chọn)}); Bản demo trong cửa sổ mới Sử dụng định vị CSS để hiển thị phần tử ở tọa độ hàng đầu/bên phải đã cho. Các tài liệu nguồn có các phong cách cần thiết. Mở một hộp cát cho nhiệm vụ. Để giải pháp Kích thước phần tử và cuộn Có nhiều thuộc tính JavaScript cho phép chúng tôi đọc thông tin về chiều rộng phần tử, chiều cao và các tính năng hình học khác. Chúng ta thường cần chúng khi di chuyển hoặc định vị các yếu tố trong JavaScript, để tính toán chính xác tọa độ. Phần tử mẫu như một phần tử mẫu để chứng minh các thuộc tính mà chúng tôi sẽ sử dụng một phần dưới đây: Nên tự động biến mất sau 1,5 giây. Các tùy chọn là: // hiển thị một phần tử với văn bản "Xin chào" gần đỉnh bên phải của cửa sổ hiển thị ({top: 10, // 10px từ trên cùng của cửa sổ (theo mặc định 0px) phải: 10, // 10px từ cạnh phải của cửa sổ (theo mặc định 0px) html: "Xin chào!", // HTML của ClassName thông báo: "Chào mừng" // Một lớp bổ sung cho div (tùy chọn)}); Bản demo trong cửa sổ mới Sử dụng định vị CSS để hiển thị phần tử ở tọa độ hàng đầu/bên phải đã cho. Các tài liệu nguồn có các phong cách cần thiết. Mở một hộp cát cho nhiệm vụ. Các phong cách liên kết đã truy cập vào các liên kết được ẩn! Các liên kết được truy cập có thể được tô màu bằng cách sử dụng: Visit CSS Pseudoclass. Nhưng GetComputedStyle không cung cấp quyền truy cập vào màu đó, bởi vì nếu không, một trang tùy ý có thể tìm hiểu xem người dùng có truy cập liên kết hay không bằng cách tạo nó trên trang và kiểm tra các kiểu. JavaScript có thể không thấy các kiểu được áp dụng bởi: đã truy cập. Ngoài ra, có một giới hạn trong CSS cấm áp dụng các kiểu thay đổi hình học trong: đã truy cập. Điều đó để đảm bảo rằng không có trang nào cho một trang xấu xa để kiểm tra xem một liên kết đã được truy cập và do đó phá vỡ sự riêng tư. Tóm tắt Để quản lý các lớp, có hai thuộc tính DOM: ● ● ClassName - Giá trị chuỗi, tốt để quản lý toàn bộ tập hợp các lớp. Danh sách lớp - đối tượng có các phương thức Thêm/Xóa/Chuyển đổi/Chứa, Tốt cho các lớp riêng lẻ. offsetparent, offsetleft/top Các thuộc tính này hiếm khi cần thiết, nhưng chúng vẫn là các thuộc tính hình học bên ngoài nhất, vì vậy chúng tôi sẽ bắt đầu với chúng. Tùy bù là tổ tiên gần nhất, trình duyệt sử dụng để tính toán tọa độ trong quá trình kết xuất. Đó là tổ tiên gần nhất, thỏa mãn các điều kiện sau: 1. vị trí của CSS (vị trí là tuyệt đối, tương đối, cố định hoặc dính), 2. hoặc ,,, 3. Hoặc. Các thuộc tính offsetleft/offsetTop cung cấp tọa độ x/y so với góc trên bên trái của nó. Trong ví dụ bên dưới bên trong có sự thay đổi và offsetleft/offsettop chuyển từ góc trên bên trái của nó (180):... message.remove (), 5000); Mã này có thể được sửa đổi để hiển thị thông báo ở bên trái, bên phải, bên dưới, áp dụng hình ảnh CSS để Fade Fade It trong phạm vi, v.v. Điều đó dễ dàng, vì chúng ta có tất cả các tọa độ và kích thước của yếu tố. Nhưng lưu ý các chi tiết quan trọng: khi trang được cuộn, thông báo sẽ chảy ra khỏi nút. Lý do là hiển nhiên: phần tử tin nhắn dựa vào vị trí: đã sửa, vì vậy nó vẫn ở cùng một vị trí của cửa sổ trong khi trang cuộn đi. Để thay đổi điều đó, chúng ta cần sử dụng tọa độ và vị trí dựa trên tài liệu: Tuyệt đối. Tọa độ tài liệu tọa độ liên quan đến tài liệu bắt đầu từ góc trên bên trái của tài liệu, không phải cửa sổ. Trong CSS, tọa độ cửa sổ tương ứng với vị trí: Đã sửa lỗi, trong khi tọa độ tài liệu tương tự như vị trí: tuyệt đối trên đỉnh. Chúng ta có thể sử dụng vị trí: Tuyệt đối và TOP/Bên trái để đặt một cái gì đó ở một vị trí nhất định của tài liệu, để nó ở đó trong một cuộn trang. Nhưng chúng ta cần tọa độ phù hợp đầu tiên. Để rõ ràng, chúng tôi sẽ gọi tọa độ cửa sổ (clientX, clienty) và tọa độ tài liệu (trang, pagey). Khi trang không được cuộn, thì tọa độ cửa sổ và tọa độ tài liệu thực sự giống nhau. Điểm không phù hợp của họ quá: Và nếu chúng ta cuộn nó, thì (clientx, clienty) thay đổi, vì chúng tương đối với cửa sổ, nhưng (pagex, pagey) vẫn giữ nguyên. Ở đây, cùng một trang sau cuộn dọc: ● ● ● Khách hàng của tiêu đề "từ bài viết nổi bật của ngày hôm nay" đã trở thành 0, bởi vì phần tử hiện đang ở trên đầu cửa sổ. ClientX đã không thay đổi, vì chúng tôi đã cuộn theo chiều ngang. PageX và tọa độ pagey của phần tử vẫn giống nhau, bởi vì chúng liên quan đến tài liệu. Nhận tọa độ tài liệu ở đó, không có phương pháp tiêu chuẩn nào để có được tọa độ tài liệu của một yếu tố. Nhưng nó dễ dàng viết nó. Hai hệ tọa độ được kết nối bằng công thức: ● ● Khách hàng của tiêu đề "từ bài viết nổi bật của ngày hôm nay" đã trở thành 0, bởi vì phần tử hiện đang ở trên đầu cửa sổ. ClientX đã không thay đổi, vì chúng tôi đã cuộn theo chiều ngang. PageX và tọa độ pagey của phần tử vẫn giống nhau, bởi vì chúng liên quan đến tài liệu. Nhận tọa độ tài liệu ở đó, không có phương pháp tiêu chuẩn nào để có được tọa độ tài liệu của một yếu tố. Nhưng nó dễ dàng viết nó. Hai hệ tọa độ được kết nối bằng công thức: ● pagey = clienty + chiều cao của phần thẳng đứng cuộn ra của tài liệu. pagex = clientX + chiều rộng của phần ngang cuộn ra của tài liệu. Hàm getCoords (ELEM) sẽ lấy tọa độ cửa sổ từ elem.getBoundingClientRect () và thêm cuộn hiện tại vào chúng: // Nhận tọa độ tài liệu của hàm phần tử GetCoords (elem) { Đặt hộp = elem.getBoundingClientRect (); return {top: box.top + pageyoffset, trái: box.left + pageXoffset}; } 1 Tóm tắt Bất kỳ điểm nào trên trang đều có tọa độ: 1. Liên quan đến cửa sổ - elem.getBoundingClientRect (). 2. Liên quan đến tài liệu - elem.getBoundingClientRect () cộng với cuộn trang hiện tại. Các tọa độ cửa sổ là tuyệt vời để sử dụng với vị trí: cố định và tọa độ tài liệu làm tốt với vị trí: Tuyệt đối. Cả hai hệ thống tọa độ đều có các hệ thống của họ, và các hệ thống của họ, có những lúc chúng ta cần một hoặc một hệ thống khác, giống như vị trí CSS tuyệt đối và cố định. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. 4 Nhiệm vụ Tìm tọa độ cửa sổ về tầm quan trọng của trường: 5 Trong iframe bên dưới, bạn có thể thấy một tài liệu với trường màu xanh lá cây. Sử dụng JavaScript để tìm tọa độ cửa sổ của các góc được chỉ bằng các mũi tên. Có một tính năng nhỏ được thực hiện trong tài liệu để thuận tiện. Một nhấp chuột tại bất kỳ nơi nào cho thấy tọa độ ở đó. 2 Nhấp vào bất cứ nơi nào để có được tọa độ cửa sổ. Đó là để kiểm tra, để kiểm tra kết quả bạn nhận được bởi JavaScript. (Nhấp vào tọa độ hiển thị ở đây) 3 Để giải pháp Hiển thị một ghi chú gần tầm quan trọng của phần tử: 5 Tạo một vị trí chức năng (neo, vị trí, ELEM) định vị ELEM, tùy thuộc vào vị trí ở đầu ("trên cùng"), phải ("phải") hoặc dưới cùng ("dưới cùng") của phần tử neo. Gọi nó bên trong hàm hiển thị (neo, vị trí, html) hiển thị một phần tử với lớp "ghi chú" và văn bản HTML tại vị trí đã cho gần Cái mỏ neo. Hiển thị các ghi chú như ở đây: Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. Lưu ý ở trên " Lưu ý ở bên phải Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Lưu ý dưới đây Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. P.S. Ghi chú nên có vị trí: Đã sửa cho nhiệm vụ này. Mở một hộp cát cho nhiệm vụ. Để giải pháp Hiển thị một ghi chú gần tầm quan trọng của phần tử: 5 Tạo một vị trí chức năng (neo, vị trí, ELEM) định vị ELEM, tùy thuộc vào vị trí ở đầu ("trên cùng"), phải ("phải") hoặc dưới cùng ("dưới cùng") của phần tử neo. Gọi nó bên trong hàm hiển thị (neo, vị trí, html) hiển thị một phần tử với lớp "ghi chú" và văn bản HTML tại vị trí đã cho gần Cái mỏ neo. Hiển thị các ghi chú như ở đây: Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. Lưu ý ở trên " Lưu ý ở bên phải Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Lưu ý dưới đây Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. " Lưu ý ở bên phải Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Lưu ý dưới đây Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. P.S. Ghi chú nên có vị trí: Đã sửa cho nhiệm vụ này. Mở một hộp cát cho nhiệm vụ. Hiển thị một ghi chú gần phần tử (hoàn toàn) tầm quan trọng: 5 Sửa đổi giải pháp của tác vụ trước đó để ghi chú sử dụng vị trí: tuyệt đối thay vì vị trí: cố định. Điều đó sẽ ngăn chặn "chạy trốn" của nó khỏi phần tử khi trang cuộn. Lấy giải pháp của nhiệm vụ đó như một điểm khởi đầu. Để kiểm tra cuộn, thêm phong cách. Để giải pháp Định vị ghi chú bên trong (hoàn toàn) tầm quan trọng: 5 Mở rộng tác vụ trước đây hiển thị một ghi chú gần phần tử (hoàn toàn): Dạy vị trí chức năng (neo, vị trí, elem) để chèn elem bên trong mỏ neo. Giá trị mới cho vị trí: ● Lưu ý ở bên phải Lưu ý ở bên phải Lưu ý ở bên phải Lưu ý ở bên phải Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Lưu ý dưới đây Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. Lưu ý ở bên phải Giáo viên: Tại sao bạn đến muộn? Sinh viên: Có một người đàn ông mất một hóa đơn trăm đô la. Giáo viên: Thật tuyệt. Bạn có giúp anh ấy tìm nó không? Học sinh: Không. 1 đang đứng trên nó. Lưu ý dưới đây Lorem rất cà rốt, nhà phát triển cà chua. Các chuyến bay bị chỉ trích và đau đớn để rơi vào những thú vui của sai lầm để tránh vui vẻ! Lòng thù hận trong thời gian, do đó không ai xứng đáng với lợi ích của việc cung cấp rắc rối, là thời điểm của tất cả được chấp nhận để tuân theo các dịch vụ của người khôn ngoan. P.S. Ghi chú nên có vị trí: Đã sửa cho nhiệm vụ này. Mở một hộp cát cho nhiệm vụ. Hiển thị một ghi chú gần phần tử (hoàn toàn) tầm quan trọng: 5 Sửa đổi giải pháp của tác vụ trước đó để ghi chú sử dụng vị trí: tuyệt đối thay vì vị trí: cố định. Điều đó sẽ ngăn chặn "chạy trốn" của nó khỏi phần tử khi trang cuộn. Lấy giải pháp của nhiệm vụ đó như một điểm khởi đầu. Để kiểm tra cuộn, thêm phong cách. Để giải pháp Định vị ghi chú bên trong (hoàn toàn) tầm quan trọng: 5 Mở rộng tác vụ trước đây hiển thị một ghi chú gần phần tử (hoàn toàn): Dạy vị trí chức năng (neo, vị trí, elem) để chèn elem bên trong mỏ neo. Giá trị mới cho vị trí: ● ● Top-out, phải, từ dưới cùng-hoạt động giống như trước đây, họ chèn ELEM trên / phải / dưới neo. Top-in, bên phải, dưới cùng-chèn ELEM bên trong neo dính vào cạnh trên / phải / dưới. Ví dụ: // hiển thị ghi chú trên các vị trí blockquote (blockquote, "top-out", note); // hiển thị ghi chú Blockquote, ở vị trí trên cùng (ghi chú "blockquote" top-in "); HTML-attribution Một trình xử lý có thể được đặt trong HTML với một thuộc tính có tên trên. Chẳng hạn, để gán một trình xử lý nhấp chuột cho đầu vào, chúng ta có thể sử dụng onclick, như ở đây: Khi nhấp chuột, mã bên trong Onclick chạy. Xin lưu ý rằng bên trong Onclick, chúng tôi sử dụng các trích dẫn đơn, bởi vì bản thân thuộc tính có trong trích dẫn kép. Nếu chúng ta quên rằng mã nằm trong thuộc tính và sử dụng các trích dẫn kép bên trong, như thế này: onclick = "alert (" click! ")", Thì nó đã giành được công việc đúng. Một sự tham gia của HTML không phải là một nơi thuận tiện để viết nhiều mã, vì vậy chúng tôi nên tạo một chức năng JavaScript và gọi nó ở đó. Ở đây một nhấp chuột chạy chức năng Countrabbits (): Đếm thỏ! Như chúng ta đã biết, tên thuộc tính HTML không nhạy cảm với trường hợp, do đó, Onclick hoạt động cũng như onclick và onclick, nhưng thường các thuộc tính được hạ thấp: onclick. Thuộc tính dom Chúng ta có thể chỉ định một trình xử lý bằng một thuộc tính DOM trên. Ví dụ, elem.onclick: Nhấp vào đây Nếu trình xử lý được gán bằng cách sử dụng phương tiện HTML thì trình duyệt sẽ đọc nó, hãy tạo một hàm mới từ nội dung thuộc tính và ghi nó vào thuộc tính DOM. Vì vậy, cách này thực sự giống như cái trước. Trình xử lý luôn nằm trong thuộc tính DOM: thuộc tính HTML chỉ là một trong những cách để khởi tạo nó. Hai đoạn mã này hoạt động giống nhau: 1. Chỉ HTML: Cái nút 2. HTML + JS: Cái nút 2. HTML + JS: Vì chỉ có một tài sản Onclick, chúng tôi có thể gán nhiều hơn một người xử lý sự kiện. Nhấp vào đây Nếu trình xử lý được gán bằng cách sử dụng phương tiện HTML thì trình duyệt sẽ đọc nó, hãy tạo một hàm mới từ nội dung thuộc tính và ghi nó vào thuộc tính DOM. Vì vậy, cách này thực sự giống như cái trước. Trình xử lý luôn nằm trong thuộc tính DOM: thuộc tính HTML chỉ là một trong những cách để khởi tạo nó. Hai đoạn mã này hoạt động giống nhau: 1. Chỉ HTML: Cái nút 2. HTML + JS: Vì chỉ có một tài sản Onclick, chúng tôi có thể gán nhiều hơn một người xử lý sự kiện. Trong ví dụ dưới đây, việc thêm một trình xử lý với JavaScript ghi đè lên trình xử lý hiện có: Nhân tiện, chúng ta có thể gán một chức năng hiện có như một người xử lý trực tiếp: hàm saythanks () {alert ('cảm ơn!'); } elem.onclick = saythanks; Để loại bỏ một người xử lý - gán elem.onclick = null. Truy cập phần tử: Đây là giá trị của bên trong một trình xử lý là phần tử. Một trong đó có người xử lý trên đó. Trong nút bên dưới hiển thị nội dung của nó bằng cách sử dụng này. Những sai lầm có thể xảy ra nếu bạn bắt đầu làm việc với sự kiện - xin lưu ý một số sự tinh tế. Hàm nên được gán là Saythanks, không phải Saythanks (). // nút bên phải.onclick = saythanks; // Nút sai.onclick = Saythanks (); Nếu chúng ta thêm dấu ngoặc đơn, Saythanks () - là một cuộc gọi chức năng. Vì vậy, dòng cuối cùng thực sự có kết quả của việc thực thi chức năng, điều đó không được xác định (vì hàm không trả về không có gì) và gán nó cho onclick. Điều đó không làm việc. Nhưng trong đánh dấu, chúng tôi cần các dấu ngoặc đơn: Sự khác biệt là dễ dàng để giải thích. Khi trình duyệt đọc thuộc tính, nó tạo ra một hàm xử lý với cơ thể từ nội dung của nó. Vì vậy, ví dụ cuối cùng giống như: nút.onclick = function () {Saythanks (); // Nội dung thuộc tính}; Sử dụng các chức năng, không phải chuỗi. Bài tập elem.onclick = "alert (1)" cũng sẽ hoạt động. Nó hoạt động vì lý do tương thích, nhưng không được khuyến khích. Don Tiết sử dụng SetAttribution cho người xử lý. Một cuộc gọi như vậy đã giành được công việc: // Nhấp vào sẽ tạo lỗi, // Vì các thuộc tính luôn là chuỗi, hàm trở thành một chuỗi tài liệu.body.setAttribution ('onclick', function () {alert (1)}); Các trường hợp tài sản Dom-Property. Chỉ định một trình xử lý cho elem.onclick, không phải elem.onclick, bởi vì các thuộc tính dom có tính nhạy cảm với trường hợp. AddEventListener Vấn đề cơ bản của các cách nói trên để chỉ định người xử lý - chúng tôi có thể gán nhiều trình xử lý cho một sự kiện. Chẳng hạn, một phần của mã của chúng tôi muốn làm nổi bật một nút trên nhấp chuột và một phần khác muốn hiển thị một tin nhắn. Chúng tôi muốn chỉ định hai trình xử lý sự kiện cho điều đó. Nhưng một thuộc tính DOM mới sẽ ghi đè lên một thuộc tính hiện có: Chẳng hạn, một phần của mã của chúng tôi muốn làm nổi bật một nút trên nhấp chuột và một phần khác muốn hiển thị một tin nhắn. Chúng tôi muốn chỉ định hai trình xử lý sự kiện cho điều đó. Nhưng một thuộc tính DOM mới sẽ ghi đè lên một thuộc tính hiện có: input.onclick = function () {alert (1); } // ... input.onclick = function () {alert (2); } // Thay thế trình xử lý trước đó Các nhà phát triển tiêu chuẩn web hiểu rằng từ lâu và đề xuất một cách thay thế để quản lý người xử lý bằng các phương pháp đặc biệt addeventlistener và removeEventListener. Họ không có vấn đề như vậy. Cú pháp để thêm một người xử lý: ⚠ Loại bỏ yêu cầu cùng một chức năng Để loại bỏ một trình xử lý, chúng ta nên vượt qua chính xác chức năng như được gán. Điều đó không hoạt động: elem.addeventListener ("click", () => alert ('cảm ơn!')); // .... elem.RemoveEventListener ("Nhấp", () => alert ('cảm ơn!')); Trình xử lý đã giành chiến thắng được loại bỏ, bởi vì RemoveEventListener có một chức năng khác - với cùng một mã, nhưng điều đó không quan trọng. Đây là cách đúng đắn: Chức năng xử lý () {alert ('cảm ơn!'); } input.AddEnentListener ("Nhấp", Handler); // .... input.RemoveEventListener ("Nhấp", Handler); Xin lưu ý - nếu chúng tôi không lưu trữ chức năng trong một biến, thì chúng tôi có thể loại bỏ nó. Không có cách nào để đọc lại những người xử lý của người khác được chỉ định bởi AddEventListener. Nhiều cuộc gọi đến AddEventListener cho phép thêm nhiều trình xử lý, như thế này: Như chúng ta có thể thấy trong ví dụ trên, chúng ta có thể đặt trình xử lý cả bằng cách sử dụng DomProperty và AddEventListener. Nhưng nói chung chúng tôi chỉ sử dụng một trong những cách này. ⚠ Đối với một số sự kiện, người xử lý chỉ làm việc với AddEventListener Có tồn tại các sự kiện có thể được chỉ định thông qua một tài sản DOM. Phải sử dụng AddEventListener. Chẳng hạn, quá trình chuyển đổi sự kiện (hoạt hình CSS kết thúc) là như vậy. Hãy thử mã bên dưới. Trong hầu hết các trình duyệt, chỉ có trình xử lý thứ hai hoạt động, không phải là đầu tiên. cảnh báo ("1")); nút.RemoveEventListener ("Nhấp", () => ALERT ("1")); nút.onclick = () => alert (2); Để giải pháp Di chuyển quả bóng trên tầm quan trọng của trường: 5 Di chuyển bóng trên sân sang một cú nhấp chuột. Giống như thế này: Nhấp vào một trường để di chuyển bóng ở đó. ......................... ......................... ......................... ......................... ......................... ......................... ......................... ......................... Yêu cầu: ● ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Bóng không được ranh giới trường chéo. ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Bóng không được ranh giới trường chéo. Khi trang được cuộn, không có gì nên phá vỡ. Để giải pháp Di chuyển quả bóng trên tầm quan trọng của trường: 5 Di chuyển bóng trên sân sang một cú nhấp chuột. Giống như thế này: Nhấp vào một trường để di chuyển bóng ở đó. ......................... ......................... ......................... ......................... ......................... ......................... ......................... ......................... Yêu cầu: ● ● Khi trang được cuộn, không có gì nên phá vỡ. Để giải pháp Di chuyển quả bóng trên tầm quan trọng của trường: 5 Di chuyển bóng trên sân sang một cú nhấp chuột. Giống như thế này: Nhấp vào một trường để di chuyển bóng ở đó. ......................... ......................... ......................... ......................... ......................... ......................... ......................... ......................... Yêu cầu: ● ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Yêu cầu: ● ● Yêu cầu: ● ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Bóng không được ranh giới trường chéo. Khi trang được cuộn, không có gì nên phá vỡ. Để giải pháp Di chuyển quả bóng trên tầm quan trọng của trường: 5 Di chuyển bóng trên sân sang một cú nhấp chuột. Giống như thế này: Nhấp vào một trường để di chuyển bóng ở đó. ......................... ......................... ......................... ......................... ......................... ......................... ......................... ......................... Yêu cầu: ● ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Bóng không được ranh giới trường chéo. Khi trang được cuộn, không có gì nên phá vỡ. Để giải pháp Di chuyển quả bóng trên tầm quan trọng của trường: 5 Di chuyển bóng trên sân sang một cú nhấp chuột. Giống như thế này: Nhấp vào một trường để di chuyển bóng ở đó. ......................... ......................... ......................... ......................... ......................... ......................... ......................... ......................... Yêu cầu: ● ● Trung tâm bóng sẽ đến chính xác dưới con trỏ trên nhấp chuột (nếu có thể mà không vượt qua cạnh trường). CSS-Animation được chào đón. Bóng không được ranh giới trường chéo. Khi trang được cuộn, không có gì nên phá vỡ. Ghi chú: ● Mã cũng nên hoạt động với các kích thước bóng và trường khác nhau, không bị ràng buộc với bất kỳ giá trị cố định nào. Sử dụng Thuộc tính Event.ClientX/Event.Clienty cho tọa độ nhấp chuột. Mở một hộp cát cho nhiệm vụ. Tạo một menu trượt tầm quan trọng: 5 Tạo một menu mở/sụp đổ khi nhấp vào: ▶ Sweeties Vì vậy, nếu chúng ta nhấp vào , sau đó chúng tôi sẽ thấy 3 cảnh báo: P → Div → Form. Quá trình này được gọi là Bong Bubbled, bởi vì các sự kiện Bong bóng bong bóng từ phần tử bên trong qua các bậc cha mẹ như một bong bóng trong nước. ⚠ Hầu như tất cả các sự kiện bong bóng. Từ khóa trong cụm từ này là gần như. Ví dụ, một sự kiện tập trung không bong bóng. Có những ví dụ khác quá, chúng tôi sẽ gặp họ. Nhưng nó vẫn là một ngoại lệ, thay vì một quy tắc, hầu hết các sự kiện đều làm bong bóng. Event.Target Một trình xử lý trên một phần tử cha luôn có thể nhận được chi tiết về nơi nó thực sự xảy ra. Phần tử được lồng sâu nhất gây ra sự kiện được gọi là phần tử đích, có thể truy cập dưới dạng event.target. Lưu ý sự khác biệt từ điều này (= event.currentTarget): ● ● Event.Target - là thành phần của mục tiêu trực tuyến đã bắt đầu sự kiện, nó không thay đổi thông qua quá trình sủi bọt. Đây - là phần tử hiện tại của người Viking, một yếu tố có trình xử lý hiện đang chạy trên đó. Chẳng hạn, nếu chúng ta có một hình thức xử lý duy nhất.onclick, thì nó có thể bắt được tất cả các nhấp chuột bên trong biểu mẫu. Bất kể việc nhấp chuột nào xảy ra, nó bong bóng lên và chạy trình xử lý. Trong mẫu. Trình xử lý một lần: ● ● Event.Target - là thành phần của mục tiêu trực tuyến đã bắt đầu sự kiện, nó không thay đổi thông qua quá trình sủi bọt. Đây - là phần tử hiện tại của người Viking, một yếu tố có trình xử lý hiện đang chạy trên đó. Chẳng hạn, nếu chúng ta có một hình thức xử lý duy nhất.onclick, thì nó có thể bắt được tất cả các nhấp chuột bên trong biểu mẫu. Bất kể việc nhấp chuột nào xảy ra, nó bong bóng lên và chạy trình xử lý. Trong mẫu. Trình xử lý một lần: ● Điều này (= event.civerseTarget) là yếu tố, bởi vì trình xử lý chạy trên đó. event.target là phần tử cụ thể bên trong biểu mẫu thực sự được nhấp. Kiểm tra xem: https://plnkr.co/edit/iapo3qfpdphzxju0jita?p=preview Nó có thể là sự kiện.Target bằng này - khi nhấp chuột được thực hiện trực tiếp trên phần tử. Nó có thể là sự kiện.Target bằng này - khi nhấp chuột được thực hiện trực tiếp trên phần tử. Ngừng sủi bọt một sự kiện sủi bọt đi từ phần tử đích thẳng lên. Thông thường, nó đi lên cho đến khi, sau đó để ghi lại đối tượng, và một số sự kiện thậm chí còn tiếp cận cửa sổ, gọi tất cả các trình xử lý trên đường dẫn. Nhưng bất kỳ người xử lý nào cũng có thể quyết định rằng sự kiện này đã được xử lý đầy đủ và ngăn chặn sự sủi bọt. Phương pháp cho nó là event.stoppropagation (). Chẳng hạn, ở đây Body.onclick không hoạt động nếu bạn nhấp vào: Nhấp vào đây ⚠ Hầu như tất cả các sự kiện bong bóng. Từ khóa trong cụm từ này là gần như. Ví dụ, một sự kiện tập trung không bong bóng. Có những ví dụ khác quá, chúng tôi sẽ gặp họ. Nhưng nó vẫn là một ngoại lệ, thay vì một quy tắc, hầu hết các sự kiện đều làm bong bóng. Event.Target Một trình xử lý trên một phần tử cha luôn có thể nhận được chi tiết về nơi nó thực sự xảy ra. Phần tử được lồng sâu nhất gây ra sự kiện được gọi là phần tử đích, có thể truy cập dưới dạng event.target. Lưu ý sự khác biệt từ điều này (= event.currentTarget): Điều này (= event.civerseTarget) là yếu tố, bởi vì trình xử lý chạy trên đó. event.target là phần tử cụ thể bên trong biểu mẫu thực sự được nhấp. Kiểm tra xem: https://plnkr.co/edit/iapo3qfpdphzxju0jita?p=preview Nó có thể là sự kiện.Target bằng này - khi nhấp chuột được thực hiện trực tiếp trên phần tử.
|
