2013-07-03 29 views
14

Tôi đang tìm cách thêm một lớp vào phần tử nội dung của DOM. Đối với một cái gì đó rất đơn giản, và với phần tử cơ thể tự tải nhanh (ít nhất, tôi nghĩ rằng nó sẽ tải nhanh hơn, nói, một yếu tố chôn cất trong DOM), tôi thực sự phải chờ đợi sự kiện jQuery Ready để làm như vậy nhiệm vụ đơn giản? Tôi đang tìm cách để tránh một hiệu ứng "nhấp nháy" khi thêm phong cách cho cơ thể, vì tôi sẽ có các kiểu CSS khác nhau gắn liền với lớp này có hiệu lực khi được thêm vào.Cách an toàn và nhanh nhất để thêm một lớp css vào phần thân của DOM

tôi có thể làm một cái gì đó như:

jQuery(window.document).ready(function() { 
    jQuery("body").addClass("home"); 
    }); 

Nhưng có một cách nhưng vẫn an toàn nhanh hơn? Tôi không quan tâm nếu jQuery hoặc mẹ đẻ Javascript

+1

Tôi không chắc chắn ý bạn là gì 'an toàn' - điều đó có vẻ hoàn toàn an toàn và nhanh chóng (phụ thuộc nhanh vào lượng nội dung). Những gì tôi thường làm, để tránh một hiệu ứng nhấp nháy, ẩn cơ thể bằng CSS và hiển thị nó bằng jQuery sau khi tất cả các tập lệnh đã chạy. Nó thỉnh thoảng trượt lên, ví dụ khi một phần tử được định kích thước dựa trên kích thước của một phần tử khác, nhưng các kịch bản đó chỉ cần đi sau dòng hiển thị phần thân. – ClarkeyBoy

+0

cách an toàn nhất và nhanh nhất là vào HTML và thêm lớp vào phần tử '' –

+0

chắc chắn là cách nhanh nhất và an toàn nhất là đặt nó vào thẻ body_?! – Alnitak

Trả lời

39
document.body.className += ' ' + 'home'; 

Performance comparision: className vs classList vs addClass:

Cập nhật (dựa trên bình luận PSL của)

hoặc cho những người mới hơn document.body.classList.add("home");

+4

+1 tôi sắp nhập điều này vào .. – PSL

+11

hoặc cho những cái mới hơn 'document.body.classList.add (" home ");' – PSL

+1

hãy chắc chắn rằng nó nằm trong '' – Dharman

1

Ngay sau thẻ mở body, bạn có thể tạo một thẻ script:

<body> 
<script> 
    $('body').addClass('home') 
</script> 
<!-- HTML content bellow --> 
</body> 

Điều kiện duy nhất là jQuery được nạp trong head.

Các vấn đề liên quan