Làm cách nào để thêm / cập nhật một thuộc tính cho thành phần HTML bằng JavaScript?

128

Tôi đang cố gắng tìm cách thêm / cập nhật thuộc tính bằng JavaScript. Tôi biết tôi có thể làm điều đó với setAttribute()chức năng nhưng điều đó không hoạt động trong IE.

javascript html cross-browser

— nhà phát triển
nguồn

163

Bạn có thể đọc ở đây về hành vi của các thuộc tính trong nhiều trình duyệt khác nhau, bao gồm cả IE.

element.setAttribute()nên thực hiện các mẹo, ngay cả trong IE. Bạn đã thử à? Nếu nó không hoạt động, thì có lẽ element.attributeName = 'value'có thể làm việc.

— và tôi
nguồn

5

những công việc này. nó tạo thuộc tính nếu nó không tồn tại và cập nhật nó nếu nó tồn tại. điều này được ghi nhận ở đâu đó như cách nó hoạt động?

— dev.e.loper

@ dev.e.loper DOM spec là một nơi tốt để bắt đầu: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ Lỗi

— valentinas

1

Khi tôi làm như sau: document.getElementById("nav").setAttribute("class", "active");nó hoạt động trong bảng điều khiển Chrome JS, nhưng trong trang thực tế thì nó không hoạt động..tất cả ý tưởng? Nhân tiện, trong trang thực tế tôi bao gồm các .jstập tin trước khi kết thúc bodyphạm vi.

— knowasilya

36

Những gì có vẻ dễ dàng thực sự là khó khăn nếu bạn muốn hoàn toàn tương thích.

var e = document.createElement('div');

Giả sử bạn có id của 'div1' để thêm.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

Tất cả đều hoạt động ngoại trừ bản cuối cùng trong IE 5.5 (vốn là lịch sử cổ đại vào thời điểm này nhưng vẫn là mặc định của XP không có bản cập nhật).

Nhưng có những dự phòng, tất nhiên. Sẽ không hoạt động trong IE trước 8: e.attributes['style'] Sẽ không lỗi nhưng thực tế sẽ không đặt lớp, nó phải là className : e['class'].
Tuy nhiên, nếu bạn đang sử dụng các thuộc tính thì điều này SILL hoạt động:e.attributes['class']

Tóm lại, hãy nghĩ về các thuộc tính như nghĩa đen và hướng đối tượng.

Theo nghĩa đen, bạn chỉ muốn nó nhổ ra x = 'y' và không nghĩ về nó. Đây là những thuộc tính, setAttribution, createdAttribution dành cho (ngoại trừ kiểu ngoại lệ của IE). Nhưng bởi vì đây là những đối tượng thực sự nên mọi thứ có thể bị lẫn lộn.

Vì bạn sẽ gặp khó khăn trong việc tạo đúng một phần tử DOM thay vì phần mềm jQuery bên trong jQuery, tôi sẽ coi nó như một phần tử và gắn bó với e.groupName = 'fooClass' và e.id = 'fooID'. Đây là một ưu tiên thiết kế, nhưng trong trường hợp này, cố gắng coi mọi thứ khác hơn là một đối tượng hoạt động chống lại bạn.

Nó sẽ không bao giờ phản tác dụng với bạn như các phương thức khác có thể, chỉ cần lưu ý rằng class là className và style là một đối tượng để nó style.ference not style = "width: 50px". Cũng nhớ tagName nhưng điều này đã được tạo bởi createdEuity vì vậy bạn không cần phải lo lắng về nó.

Việc này dài hơn tôi muốn, nhưng thao tác CSS trong JS là công việc khó khăn.

— JPearce
nguồn

5

Windows XP ra mắt với IE6, không phải 5.5. Điều đó sẽ rất tệ.

— mgol

Điều này hoạt động với id, không phải với một cái gì đó khác nhưdata-toggle

— stallingOne

30

Giải pháp jQuery bắt buộc . Tìm và đặt titlethuộc tính thành foo. Lưu ý điều này chọn một yếu tố duy nhất vì tôi đang thực hiện theo id, nhưng bạn có thể dễ dàng đặt thuộc tính tương tự trên bộ sưu tập bằng cách thay đổi bộ chọn.

$('#element').attr( 'title', 'foo' );

— tvanfosson
nguồn

3

+1 cho giải pháp jQuery. Trong trường hợp của tôi, tôi đã cố gắng tránh jQuery và sản xuất nó trong javascript thuần do yêu cầu công việc của tôi. Tôi mừng vì cả hai câu trả lời đều tồn tại. Cảm ơn.

— NuclePeon

7

Bạn muốn làm gì với thuộc tính? Nó là một thuộc tính html hoặc một cái gì đó của riêng bạn?

Hầu hết thời gian bạn có thể chỉ cần giải quyết nó như một tài sản: muốn đặt tiêu đề trên một yếu tố? element.title = "foo"sẽ làm điều đó.

Đối với các thuộc tính JS tùy chỉnh của riêng bạn, DOM có thể mở rộng một cách tự nhiên (hay còn gọi là mở rộng = true), kết quả đơn giản là bạn có thể làm element.myCustomFlag = foovà sau đó đọc nó mà không gặp vấn đề gì.

— annakata
nguồn