Làm cách nào tôi có thể thiết lập một cách đáng tin cậy trình thu thập lớp với JavaScript, IE, Chrome, v.v.?

Question

Tôi đang sử dụng mã JS bên dưới để thay đổi lớp khi liên kết được nhấp.

document.getElementById("gifts").setAttribute("class", "gkvSprite selected"); 

Tính năng này không hoạt động trong IE nhưng hoạt động trong FF và Chrome. Sau đó, tôi đã thay đổi mã thành:

document.getElementById("gifts").setAttribute("className", "gkvSprite selected"); 

Sau đó, nó hoạt động trong IE, nhưng ngừng hoạt động trong FF và Chrome.

Ai đó có thể giúp tôi ở đây không?

Answer 1

Bạn chắc chắn có thể sử dụng className tài sản thay vì setAttribute:

document.getElementById("gifts").className = "gkvSprite selected"; 

Tổng quát hơn, có một vài tên thuộc tính mà các trình duyệt khác nhau điều trị khác nhau trong setAttribute: class vs className, và for vs htmlFor. Các thư viện như Prototype, jQuery và các loại tương tự sẽ làm nổi bật những khác biệt này cho bạn, mặc dù (một lần nữa) trong tình huống cụ thể của class, bạn có thể sử dụng tài sản một cách đáng tin cậy để thay thế.

Answer 2

Bạn có thể thực hiện việc này theo một vài cách.

Nếu bạn muốn sử dụng setAttribute bạn có thể phát hiện trình duyệt nào khách hàng đang sử dụng và sau đó sử dụng class trong IE và classname trong Firefox.

Ở trên sẽ hiệu quả nhưng tôi muốn sử dụng div hơn và chỉ định một lớp mới cho điều đó.

somediv.className='gkvSprite selected' 

Hoặc như T.J. Crowder đã nói ở trên. Asign qua Classname trực tiếp.

Answer 3

Nếu #gifts có chuyển tiếp CSS3 theo thời gian được đặt trên CSS, setAttribute (và removeAttribute và các lệnh js khác) cũng không thành công trong một số trình duyệt. Javascript phải được trì hoãn cho đến khi quá trình chuyển đổi được thực hiện trước khi nó có thể sửa đổi nó.