Thêm một lớp học với javascript, không thay thế

Question

Tôi muốn có khả năng thêm lớp vào một phần tử và không thay thế những lớp nào đã có ở đó.

Đây là javascript của tôi cho đến nay:

function black(body) { 
var item = document.getElementById(body); 
    if (item) { 
     item.className=(item.className=='normal')?'black':'normal'; 
    } 
} 

Đó mảnh javascript thay thế các lớp hiện có với black. Nếu lớp học đã là black thì nó được đổi thành normal.

Tôi muốn bằng cách nào đó kết hợp tập lệnh ở trên với tập lệnh bên dưới tập lệnh, điều này sẽ thêm một lớp, thay vì thay thế tất cả các lớp hiện có.

var item = document.getElementById("body"); 
item.className = item.className + " additionalclass"; 

Answer 1

Dưới đây là một số hàm javascript đơn giản mà bạn có thể sử dụng để thao tác tên lớp trong javascript thuần túy. Phải mất một ít việc làm thêm trong các chức năng này để phù hợp với tên cả lớp chỉ và tránh bất kỳ dấu cách thêm trước/sau classnames:

function removeClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, ""); 
} 

function addClass(elem, cls) { 
    elem.className += (" " + cls); 
} 

function hasClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    var testCls = " " + cls + " "; 
    return(str.indexOf(testCls) != -1) ; 
} 

function toggleClass(elem, cls) { 
    if (hasClass(elem, cls)) { 
     removeClass(elem, cls); 
    } else { 
     addClass(elem, cls); 
    } 
} 

function toggleBetweenClasses(elem, cls1, cls2) { 
    if (hasClass(elem, cls1)) { 
     removeClass(elem, cls1); 
     addClass(elem, cls2); 
    } else if (hasClass(elem, cls2)) { 
     removeClass(elem, cls2); 
     addClass(elem, cls1); 
    } 
} 

Nếu bạn muốn chuyển đổi giữa các black và normal lớp mà không ảnh hưởng bất kỳ lớp học khác trên đối tượng quy định, bạn có thể làm điều này: ví dụ

function black(id) { 
    var obj = document.getElementById(id); 
    if (obj) { 
     toggleBetweenClasses(obj, "black", "normal"); 
    } 
} 

làm việc ở đây: http://jsfiddle.net/jfriend00/eR85c/

Nếu bạn muốn thêm lớp "đen" trừ khi "bình thường" đã hiện diện, bạn có thể làm điều này:

function black(id) { 
    var obj = document.getElementById(id); 
    if (obj && !hasClass(obj, "normal")) { 
     addClass(obj, "black"); 
    } 
} 

Answer 2

Trong trường hợp bạn sẽ không thêm/xóa/chuyển đổi nhiều lớp, thay vì thêm 2-3 hàm như câu trả lời của jfriend00).

Vì vậy, đây là giải pháp thay thế cho những người mà không muốn có nhiều chức năng sẽ không được sử dụng thường xuyên:

function toggle(id) { 
    var obj = document.getElementById(id), str, len; 

    if (obj) { 
     str = " " + obj.className + " "; 
     len = str.length; 

     str = str.replace(" normal ", " "); 

     if (str.length != len) { 
      str += " black"; 
     } else { 
      str = str.replace(" black ", " "); 

      if (str.length != len) { 
       str += " normal"; 
      } 
     } 

     obj.className = str.replace(/^\s+|\s+$/g, ""); 
    } 
} 

Về cơ bản nó lưu trữ các chiều dài, cố gắng để thay thế, kiểm tra nếu nó loại bỏ các lớp (bằng cách so sánh độ dài cũ và mới) sau đó áp dụng các thay đổi cần thiết.

Lưu ý: nó sẽ chuyển đổi hoàn toàn các lớp với điều kiện là bạn không nên có hai lớp cùng một lúc lúc đầu.

DEMO