Làm cách nào để thay đổi văn bản trên bất kỳ trang web JavaScript nào?

Question

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

Nội dung chính Show

Cách chỉnh sửa trang web
Chỉnh sửa trang web như Wiki
Amit Agarwal

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

Làm cách nào để thay đổi văn bản trên bất kỳ trang web JavaScript nào?

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

<body>
  <h1 id="header">Hello, World!h1>
  <p id="content">It's a very good weather we are having today.p>
body>

Đâ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

const header = document.getElementById("header");

2 - tìm nạp một phần tử có thuộc tính phù hợp với

const header = document.getElementById("header");

3

const header = document.getElementById("header");

4 - tìm nạp các phần tử có thuộc tính phù hợp với

const header = document.getElementById("header");

5

const header = document.getElementById("header");

6 - tìm nạp các phần tử có thuộc tính phù hợp với

const header = document.getElementById("header");

7

const 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 cho

<body>
  <h1 id="header">Hello, World!h1>
  <p id="content">It's a very good weather we are having today.p>
body>

20,

<body>
  <h1 id="header">Hello, World!h1>
  <p id="content">It's a very good weather we are having today.p>
body>

21 cho

<body>
  <h1 id="header">Hello, World!h1>
  <p id="content">It's a very good weather we are having today.p>
body>

22

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ày

Trong 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ợp

Vì 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ư sau

const 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ậy

Tiế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

<body>
  <h1 id="header">Hello, World!h1>
  <p id="content">It's a very good weather we are having today.p>
body>

2

Và cứ như vậy, bạn sẽ thay đổi văn bản bên trong thẻ

const header = document.getElementById("header");

0

Hã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 đen

Ví 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ày

const 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");

8

Bây giờ nội dung thẻ

const header = document.getElementById("header");

0 sẽ được tạo kiểu phù hợp

Thuộ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

programming javascript

Làm cách nào để thay đổi văn bản trên bất kỳ trang web JavaScript nào?

Cách chỉnh sửa trang web

Chỉnh sửa trang web như Wiki

Amit Agarwal

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội