Làm cách nào để thêm thuộc tính “href” vào liên kết động bằng JavaScript?

95

Làm cách nào để thêm hrefthuộc tính vào liên kết động bằng JavaScript?

Về cơ bản tôi muốn thêm một hrefthuộc tính vào <a></a>động (tức là khi người dùng nhấp vào hình ảnh cụ thể trong trang web).

Từ đó:

<a>Link</a>

Tôi cần phải đi đến:

<a href="somelink url">Link</a>

javascript html

— Pavel
nguồn

165

var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"

— stecb
nguồn

Hấp dẫn. Tôi không biết bạn có thể truy cập trực tiếp các thuộc tính dưới dạng trường (so sánh với giải pháp của tôi bên dưới, bằng cách sử dụng setAttribute). Có ai biết nếu cách tiếp cận này là tiêu chuẩn?

— mgiuca

Tôi nghĩ rằng trên phần tử DOM, href là một thuộc tính bạn có thể đặt trực tiếp bằng el.href. Thay vào đó, setAttribute (el, attr) được sử dụng để thêm một số thuộc tính tùy chỉnh vào một phần tử DOM cụ thể, vì vậy trong trường hợp này không cần sử dụng nó để đặt std. attr

— stecb

Nhưng liệu cả hai cách đều đúng ? Không cố gắng chỉ trích câu trả lời - nó cũng có thể đúng. Nhưng trên web, không đủ để có được thứ phù hợp với bạn. Nó cần hoạt động trên tất cả các trình duyệt và điều đó có nghĩa là bạn cần tuân theo các tiêu chuẩn. FWIW, điều này cũng phù hợp với tôi (trong Firefox), nhưng tôi muốn biết liệu nó có thực sự là một cách tiêu chuẩn để làm điều đó hay không. Đặc tả W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ) dường như không đề cập đến nó.

— mgiuca

6

Đây là những giao diện để tương tác với các phần tử dễ dàng hơn. Ví dụ: tất cả các liên kết có các phương thức được xác định trong HTMLLinkElementđó hỗ trợ thiết lập các trường nhất định chẳng hạn như href. Bạn phải xem trong tài liệu tham khảo để xem bạn có thể sử dụng cái nào mà không cần phải làm setAttribute. Một ví dụ khác là <table>phần tử ( HTMLTableElement ) nơi bạn có thể sử dụng insertRow()để chèn các hàng mới mà không cần phải tạo <tr>và nối nó vào bảng.

— Thái Lan

3

@mgiuca: Nói chung đối với HTML DOM, bạn nên thích sử dụng các thuộc tính hơn là setAttribute()và getAttribute(), những thuộc tính bị hỏng trong IE và không phải lúc nào cũng làm được những gì bạn có thể mong đợi. Xem stackoverflow.com/questions/4456231/…

— Tim Down

25

Tôi giả sử bạn biết cách lấy đối tượng DOM cho <a>phần tử (sử dụng document.getElementByIdhoặc một số phương pháp khác).

Để thêm bất kỳ thuộc tính nào, chỉ cần sử dụng phương thức setAttribute trên đối tượng DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");

— mgiuca
nguồn

pal, setattribute khá không chuẩn để sửa đổi các thuộc tính. Để truy cập hoặc sửa đổi các giá trị hiện tại, bạn nên sử dụng các thuộc tính. Ví dụ: sử dụng elt.value thay vì elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes

— naveen

@naveen Nó nói "đáng chú ý nhất trong XUL", có lẽ không phải đây là gì. Tôi không chắc giá trị nào khác mà nó đề cập đến ("một số thuộc tính" rất mơ hồ), nhưng setAttributerõ ràng là tiêu chuẩn ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), và W3C không xác định bất kỳ thuộc tính nào mà nó không hoạt động. Ngược lại, tôi có thể đảm bảo rằng việc sử dụng thuộc tính sẽ không thành công đối với một số tên thuộc tính nhất định. Chẳng hạn như tagName, và setAttribute- đó đã là các trường / phương thức của giao diện Phần tử. Tôi không thấy bất kỳ nơi nào trong tài liệu W3C đề cập đến thuộc tính cho các thuộc tính.

— mgiuca

@mgiuca: Có vẻ như bạn đã tìm thấy thông số kỹ thuật liên quan sau khi đăng nhận xét cuối cùng đó. Tôi không hiểu quan điểm của bạn về các thuộc tính không thành công, và sau đó đề cập đến tagName. Bạn đang nói về các thuộc tính tùy chỉnh?

— Tim Down

Ý tôi là DOM (ngay cả khi được triển khai trong trình duyệt) là một thông số kỹ thuật chung để làm việc với cây XML nói chung, không chỉ HTML. Khi làm việc với các phần tử XML tùy ý, cách duy nhất để lấy và đặt các thuộc tính một cách đáng tin cậy là getAttributevà setAttribute; "tagName"là một ví dụ về một thuộc tính không thể hoạt động như một thuộc tính. Chỉ khi làm việc với HTML và đối với các thuộc tính nhất định được xác định trong thông số kỹ thuật HTML HTML, bạn mới có thể sử dụng các thuộc tính để đọc và gán thuộc tính.

— mgiuca

Có lẽ tôi đang hiểu lầm, nhưng điều đó vẫn khó hiểu. tagName là một thuộc tính của Elementcác đối tượng trong JavaScript, trong cả HTML và DOM XML, và bạn không thể lấy tên thẻ của phần tử thông qua getAttribute("tagName")(ngoại trừ trong IE, có việc triển khai getAttribute()và setAttribute()bị hỏng), điều này có vẻ hoàn toàn trái ngược với những gì bạn đang nói.

— Tim Down

3

Trước tiên, hãy thử thay đổi <a>Link</a>thành <span id=test><a>Link</a></span>.

Sau đó, thêm một cái gì đó như thế này vào hàm javascript mà bạn đang gọi:

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

Bằng cách này, liên kết sẽ giống như sau:

<a href="somelink">Link</a>

— Rahul Sudha
nguồn

Chào. Chào mừng bạn đến với Stackoverflow. Câu hỏi đặt ra của OP có vẻ là về làm thế nào để thêm một hrefđến một hiện a thẻ ( Tôi về cơ bản muốn thêm một thuộc tính href để <a> </a> động ). Tuy nhiên, câu trả lời này dường như được giải thích làm thế nào để tạo ra một athẻ với một href.

— Moishe Lipsker

1

document.getElementById('link-id').href = "new-href";

Tôi biết đây là một bài viết cũ, nhưng đây là một bài viết lót có thể phù hợp hơn với một số người.

— noɥʇʎԀʎzɐɹƆ
nguồn