Thay đổi văn bản liên kết javascript

Là một phần của loạt bài viết về chủ đề đơn giản nhất có thể, tôi đã chọn viết về việc thay đổi màu siêu liên kết HTML. Tôi đã học các chủ đề nâng cao hơn trong hơn một thập kỷ và thành thật mà nói, đôi khi điều đó có thể gây nhàm chán

Đăng ký Hướng dẫn viết mã nhanh hàng ngày (YOUTUBE)

Bạn cũng đang học viết mã à?

Thuộc tính quan trọng nhất của phần tử là thuộc tính href, cho biết đích của liên kết

Văn bản liên kết là phần sẽ hiển thị cho người đọc

Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định

Ví dụ

Ví dụ này cho thấy cách tạo liên kết đến W3Schools. com

Truy cập W3Schools. com

Tự mình thử »

Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt

  • Một liên kết chưa được truy cập được gạch chân và có màu xanh lam
  • Một liên kết đã truy cập được gạch chân và có màu tím
  • Một liên kết hoạt động được gạch dưới và màu đỏ

Mẹo. Tất nhiên, các liên kết có thể được tạo kiểu bằng CSS, để có giao diện khác


Liên kết HTML - Thuộc tính đích

Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết

Thuộc tính target chỉ định nơi mở tài liệu được liên kết

Thuộc tính target có thể có một trong các giá trị sau

  • _self - Mặc định. Mở tài liệu trong cùng một cửa sổ/tab khi nó được nhấp vào
  • _blank - Mở tài liệu trong cửa sổ hoặc tab mới
  • _parent - Mở tài liệu trong khung chính
  • _top - Mở tài liệu trong toàn bộ cửa sổ

Ví dụ

Sử dụng target="_blank" để mở tài liệu được liên kết trong cửa sổ hoặc tab trình duyệt mới

Truy cập W3Schools

Tự mình thử »


URL tuyệt đối so với. URL tương đối

Cả hai ví dụ trên đều sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong thuộc tính href

Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có "https. // phần www")

Ví dụ

URL tuyệt đối

W3C

Google

URL tương đối

Hình ảnh HTML

Hướng dẫn CSS

Tự mình thử »



Liên kết HTML - Sử dụng hình ảnh làm liên kết

Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ 0 bên trong thẻ

Ví dụ


Thay đổi văn bản liên kết javascript

Tự mình thử »


Liên kết đến một địa chỉ email

Sử dụng 2 bên trong thuộc tính href để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới)


Nút dưới dạng Liên kết

Để sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript

JavaScript cho phép bạn chỉ định điều gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút

Ví dụ

Hướng dẫn HTML

Tự mình thử »


Tiêu đề liên kết

Thuộc tính 4 chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử

❮ Tham chiếu chuỗi JavaScript

Ví dụ

let text = "Hướng dẫn xây dựng web miễn phí. ";
hãy để kết quả = văn bản. liên kết ("https. //www. w3schools. com");

Tự mình thử »


Định nghĩa và cách sử dụng

Chuỗi liên kết () không được dùng trong JavaScript

Tránh sử dụng nó

Nó có thể ngừng hoạt động trong trình duyệt của bạn bất cứ lúc nào

Phương thức href4 trả về một chuỗi nhúng trong thẻ

chuỗi


cú pháp

Thông số

Tham sốDescriptionurlBắt buộc.
URL để liên kết tới.

Giá trị trả về

Một chuỗi nhúng trong thẻ.
❮ Tham chiếu chuỗi JavaScript

Mục đích của kỹ thuật này là cho phép người dùng chọn thêm thông tin bổ sung vào văn bản của các liên kết để các liên kết có thể được hiểu ngoài ngữ cảnh

Một số người dùng thích có các liên kết độc lập, nơi không cần khám phá ngữ cảnh của liên kết. Những người dùng khác thấy việc bao gồm thông tin ngữ cảnh trong mỗi liên kết là lặp đi lặp lại và làm giảm khả năng sử dụng trang web của họ. Trong số những người sử dụng công nghệ hỗ trợ, phản hồi cho nhóm làm việc nào được ưu tiên hơn đã được chia. Kỹ thuật này cho phép người dùng chọn cách tiếp cận phù hợp nhất với họ

Một liên kết được cung cấp gần đầu trang sẽ mở rộng văn bản liên kết của các liên kết trên trang để không cần ngữ cảnh bổ sung để hiểu mục đích của bất kỳ liên kết nào. Phải luôn có thể hiểu mục đích của liên kết mở rộng trực tiếp từ văn bản liên kết của nó

Kỹ thuật này chỉ mở rộng các liên kết cho chế độ xem trang hiện tại. Cũng có thể, và trong một số trường hợp, nên lưu tùy chọn này trong cookie hoặc hồ sơ người dùng phía máy chủ để người dùng chỉ phải thực hiện lựa chọn một lần trên mỗi trang web

Làm cách nào để thay thế liên kết bằng văn bản JavaScript?

Sử dụng thuộc tính textContent để thay đổi văn bản của phần tử liên kết , e. g. liên kết. textContent = 'Văn bản liên kết thay thế'. Thuộc tính textContent sẽ đặt văn bản của liên kết thành chuỗi được cung cấp, thay thế bất kỳ nội dung hiện có nào.

Làm cách nào để thay đổi liên kết bằng JavaScript?

Mã thay đổi URL trong liên kết bằng JavaScript. Khi thay đổi URL liên kết bằng JavaScript, bạn sẽ phải sử dụng phương thức setAttribute . Trước khi chạm vào jQuery, các nhà phát triển nên tìm hiểu về các phương thức cơ bản nhưng hữu ích như thế này. Mã bên dưới thay đổi thuộc tính href của liên kết đến địa chỉ trang web của tôi.

Làm cách nào để tạo văn bản dưới dạng liên kết trong JavaScript?

Làm cách nào để chuyển đổi văn bản URL thành siêu liên kết có thể nhấp trong JavaScript?

Tạo tệp HTML và xác định mã đánh dấu cũng như tập lệnh Để chuyển đổi URL thành Liên kết HTML . Trong bước này, chúng tôi tạo một vùng văn bản nơi người dùng sẽ viết một số văn bản có liên kết và sau đó khi người dùng nhấp vào nút chuyển đổi, chúng tôi gọi convert(); . Trong chức năng này, chúng tôi viết hai biểu thức chính quy để phát hiện liên kết trong văn bản.