Các trang web ở chế độ chỉ đọc nhưng bạn có biết rằng có thể chỉnh sửa nội dung của trang web trực tiếp trong trình duyệt web của mình không. Hướng dẫn từng bước này giải thích cách bạn có thể dễ dàng chỉnh sửa nội dung của bất kỳ trang web nào bằng Công cụ dành cho nhà phát triển. Tôi đã sử dụng Google Chrome cho ví dụ này nhưng Công cụ dành cho nhà phát triển có sẵn trong tất cả các trình duyệt bao gồm Mozilla Firefox và Safari
Cách chỉnh sửa trang web
Dưới đây là hướng dẫn từng bước về cách bạn chỉnh sửa văn bản trang web ngay cả khi trang web đó không phải của riêng bạn
- Mở bất kỳ trang web nào trong Chrome và chọn văn bản trên trang web mà bạn muốn chỉnh sửa
- Nhấp chuột phải vào văn bản đã chọn và chọn Inspect Element trong menu ngữ cảnh
- Các công cụ dành cho nhà phát triển sẽ mở ở nửa dưới trình duyệt của bạn và phần tử DOM tương ứng sẽ được chọn
- Bấm đúp vào nút đã chọn và nó sẽ chuyển sang chế độ chỉnh sửa. Bây giờ hãy thay đổi văn bản bên trong Công cụ dành cho nhà phát triển và nhấp vào bên ngoài cửa sổ Công cụ dành cho nhà phát triển Chrome để áp dụng các thay đổi
Nếu bạn đã quen thuộc với thẻ HTML, bạn có thể sử dụng kỹ thuật tương tự để không chỉ chỉnh sửa văn bản trên trang web mà còn thay thế hình ảnh, thay đổi kiểu định dạng, v.v.
Cũng thấy. Cách thay thế văn bản trong các trang web
Kỹ thuật Công cụ kiểm tra Chrome rất hữu ích để thực hiện một số chỉnh sửa nhanh nhưng nếu bạn đang thực hiện nhiều thay đổi văn bản trên một trang web thì có một cách tiếp cận tốt hơn
Chỉnh sửa trang web như Wiki
Chuyển đến menu trình duyệt của bạn, chọn Công cụ, chọn Công cụ dành cho nhà phát triển rồi chọn Bảng điều khiển JavaScript. Nếu bạn đang ở Safari dành cho Mac, hãy chọn menu Phát triển rồi chọn Hiển thị Bảng điều khiển JavaScript. Trong Firefox, vào Tools > Web Developer > Show Web Console
Bên trong cửa sổ bảng điều khiển, nhập mã JavaScript sau tại dấu nhắc lệnh và nhấn Enter
document.body.contentEditable = true;
Điều này sẽ làm là làm cho toàn bộ trang web của bạn có thể chỉnh sửa giống như Wiki hoặc tài liệu Word. Bây giờ bạn có thể nhấp vào bất kỳ đâu trên trang web và bắt đầu nhập
Xin lưu ý rằng các chỉnh sửa trang web chỉ là tạm thời và các thay đổi sẽ bị mất khi bạn đóng trình duyệt. Tuy nhiên, kỹ thuật này vẫn hữu ích nếu bạn đang chụp ảnh màn hình của các trang web và muốn ẩn hoặc thay thế một số cụm từ trước khi chụp ảnh
wikiThiết Kế Web
Chia sẻWhatsAppTwitterFacebook
Amit Agarwal
Chuyên gia phát triển của Google, Nhà vô địch Google Cloud
Amit Agarwal là Chuyên gia nhà phát triển của Google về Google Workspace và Google Apps Script. Ông có bằng kỹ sư về Khoa học Máy tính [I. I. T. ] và là blogger chuyên nghiệp đầu tiên ở Ấn Độ
Amit đã phát triển một số tiện ích bổ sung phổ biến của Google bao gồm Mail Merge cho Gmail và Document Studio. Đọc thêm về Lifehacker và YourStory
Cách dễ nhất để thay đổi nội dung văn bản của các trang HTML là thao tác với thuộc tính
const header = document.getElementById["header"];
1 của phần tử cụ thể bằng JavaScriptĐầu tiên, bạn cần chọn thành phần muốn thay đổi văn bản. Nó có thể là một
const header = document.getElementById["header"];
2, một const header = document.getElementById["header"];
3, một const header = document.getElementById["header"];
4 hoặc bất kỳ thẻ nào khác. Tất cả các phần tử HTML đều có thuộc tính const header = document.getElementById["header"];
1 mà từ đó bạn có thể đặt văn bản cho phần tử đóVí dụ: giả sử bạn có trang HTML sau
Hello, World!
It's a very good weather we are having today.
Đây là cách thay đổi văn bản bên trong phần tử
const header = document.getElementById["header"];
0 thành “Lời chào từ Mark”Trước tiên, bạn cần chọn phần tử
const header = document.getElementById["header"];
0 bằng bộ chọn phần tử của JavaScript. Trình duyệt cung cấp cho bạn 4 phương pháp để chọn một phần tử HTML
2 - tìm nạp một phần tử có thuộc tính phù hợp vớiconst header = document.getElementById["header"];
3const header = document.getElementById["header"];
4 - tìm nạp các phần tử có thuộc tính phù hợp vớiconst header = document.getElementById["header"];
5const header = document.getElementById["header"];
6 - tìm nạp các phần tử có thuộc tính phù hợp vớiconst header = document.getElementById["header"];
7const header = document.getElementById["header"];
8 - lấy các phần tử có tên thẻ phù hợp nhưconst header = document.getElementById["header"];
9 choconst header = document.getElementById["header"];
20,Hello, World! It's a very good weather we are having today.
21 choHello, World! It's a very good weather we are having today.
22Hello, World! It's a very good weather we are having today.
Cách tiếp cận được đề xuất nhiều nhất là sử dụng phương pháp
const header = document.getElementById["header"];
2 vì đây là phương pháp cụ thể nhất trong số các phương pháp nàyTrong số bốn phương thức, chỉ có
const header = document.getElementById["header"];
2 sẽ truy xuất một phần tử dưới dạng một đối tượng. Các phương thức khác sẽ tìm nạp các phần tử dưới dạng một mảng ngay cả khi trang chỉ có một phần tử phù hợpVì thẻ
const header = document.getElementById["header"];
0 ở trên đã có thuộc tính const header = document.getElementById["header"];
3 nên bạn có thể sử dụng thuộc tính đó để lấy phần tử như sauconst header = document.getElementById["header"];
Nếu phần tử của bạn không có thuộc tính
const header = document.getElementById["header"];
3 thì bạn có thể thêm nó trước. Vui lòng đảm bảo rằng không có hai phần tử nào trở lên có cùng giá trị thuộc tính const header = document.getElementById["header"];
3. JavaScript sẽ chỉ trả lại phần tử đầu tiên mà nó tìm thấy nếu bạn làm như vậyTiếp theo, bạn chỉ cần thay thuộc tính
const header = document.getElementById["header"];
1 như trong đoạn mã dưới đây
Hello, World!
It's a very good weather we are having today.
2Và cứ như vậy, bạn sẽ thay đổi văn bản bên trong thẻ
const header = document.getElementById["header"];
0Hãy nhớ rằng thuộc tính
const header = document.getElementById["header"];
1 chỉ được sử dụng để thay đổi văn bản bên trong phần tử. Nếu bạn thêm thẻ HTML bên trong văn bản, nó sẽ được hiển thị trên trang theo nghĩa đenVí dụ: giả sử bạn muốn thêm một văn bản có kiểu chữ nghiêng với thẻ
const header = document.getElementById["header"];
42. Bạn có thể thử thêm nó như thế nàyconst header = document.getElementById["header"];
4Điều gì sẽ xảy ra là văn bản
const header = document.getElementById["header"];
43 sẽ được hiển thị trên trang HTMLĐể thêm đúng thẻ HTML vào văn bản mới của bạn, bạn cần sử dụng thuộc tính
const header = document.getElementById["header"];
44 thay vì thuộc tính const header = document.getElementById["header"];
1. Đây là một ví dụconst header = document.getElementById["header"];
8Bây giờ nội dung thẻ
const header = document.getElementById["header"];
0 sẽ được tạo kiểu phù hợpThuộc tính
const header = document.getElementById["header"];
44 cho phép bạn đặt nội dung HTML của phần tử, không chỉ là văn bản thuần túy như trong thuộc tính const header = document.getElementById["header"];
1. Hãy sử dụng phương pháp đáp ứng nhu cầu của bạn 😉Bạn có thể sử dụng các phương pháp tương tự để thay đổi các phần tử HTML khác như thẻ
const header = document.getElementById["header"];
3, thẻ const header = document.getElementById["header"];
2 hoặc thẻ const header = document.getElementById["header"];
4