Tạo một lớp CSS trong jQuery

Question

Tôi tin rằng hàm .addClass() trong jQuery gắn một lớp CSS vào lựa chọn hiện tại, nhưng tôi tự hỏi tôi có thể tạo hoặc định nghĩa một lớp CSS trong jQuery, sau đó đính kèm nó?

Answer 1

Thực ra, bạn có thể tạo quy tắc CSS sẽ ảnh hưởng đến tất cả các thành phần trên trang hiện tại. Trong hầu hết các trình duyệt nó nên càng đơn giản như:

var style = $('<style>body { background: green; }</style>') 
$('html > head').append(style); 

này có thể hoặc không có thể làm việc trong IE, tuy nhiên bạn có thể sử dụng trình duyệt IE của độc quyền addRule thay vì:

document.styleSheets[0].addRule('body', 'background: green', -1); 

Đương nhiên điều này sẽ không giúp bạn trong việc tạo các tệp css có thể được chia sẻ giữa các trang web, nhưng đó là một cách tiện dụng để ảnh hưởng đến kiểu của một số lượng lớn các phần tử mà không cần phải lặp lại chúng.

Answer 2

Tôi không chắc chắn chính xác những gì bạn muốn, nhưng tôi nghĩ tốt nhất bạn có thể làm là một cái gì đó như thế này:

var someClass = { "width": "100%", "background": "#ffffff" }; 
$(this).css(someClass); 

Lưu ý rằng điều này là không thực sự tạo ra một lớp, nhưng nó có thể làm những gì bạn nhu cầu.

Answer 3

Đây là thứ sẽ tạo lớp CSS sẽ có sẵn ở mọi nơi và áp dụng nó cho đối tượng jQuery. Này sử dụng các kỹ thuật cơ bản giống nhau như đã đề cập bởi MooGoo nhưng fleshed ra thành một mảnh đầy đủ chức năng của mã:

(function() { 
    var addRule; 

    if (typeof document.styleSheets != "undefined" && document.styleSheets) { 
     addRule = function(selector, rule) { 
      var styleSheets = document.styleSheets, styleSheet; 
      if (styleSheets && styleSheets.length) { 
       styleSheet = styleSheets[styleSheets.length - 1]; 
       if (styleSheet.addRule) { 
        styleSheet.addRule(selector, rule) 
       } else if (typeof styleSheet.cssText == "string") { 
        styleSheet.cssText = selector + " {" + rule + "}"; 
       } else if (styleSheet.insertRule && styleSheet.cssRules) { 
        styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length); 
       } 
      } 
     } 
    } else { 
     addRule = function(selector, rule, el, doc) { 
      el.appendChild(doc.createTextNode(selector + " {" + rule + "}")); 
     }; 
    } 

    var createCssClass = function(className, cssProps, doc) { 
     doc = doc || document; 

     var head = doc.getElementsByTagName("head")[0]; 
     if (head && addRule) { 
      var selector = "*." + className; 
      var ruleBits = []; 
      for (var i in cssProps) { 
       if (cssProps.hasOwnProperty(i)) { 
        ruleBits.push(i + ":" + cssProps[i] + ";"); 
       } 
      } 
      var rule = ruleBits.join(""); 
      var styleEl = doc.createElement("style"); 
      styleEl.type = "text/css"; 
      styleEl.media = "screen"; 
      head.appendChild(styleEl); 
      addRule(selector, rule, styleEl, doc); 
      styleEl = null; 
     } 
    }; 

    jQuery.fn.createAndApplyCssClass = function(className, cssProps) { 
     createCssClass(className, cssProps, document); 
     this.addClass(className); 
    }; 
})(); 

$("#someelement").createAndApplyCssClass("test", { 
    "background-color": "green", 
    "color" : "white" 
}); 

Answer 4

Với jQuery.Rule bạn có thể viết mã như thế này để nối thêm một quy tắc CSS mới:

$.rule('#content ul{ border:1px solid green }').appendTo('style'); 

Mở rộng một quy tắc:

$.rule('#content ul', 'style').append('background:#FF9'); 

Loại bỏ toàn bộ quy tắc:

$.rule('#content ul', 'style').remove(); 

Có nhiều hơn trong số API docs.

Nội bộ, nó sử dụng mẹo "chắp thêm biểu định kiểu để đầu" mà MooGoo mentioned as well.